求助：移动端设置仅底部边框出现异常线条，Mac正常iPhone异常

嘿，我之前也碰到过iOS Safari这个烦人的边框渲染bug，你的思路是对的，但可能有些细节没覆盖到iOS的特殊渲染逻辑，导致出现奇怪的额外线条。

问题根源 #

你当前的CSS尝试重置所有边框和outline，只保留底部边框，但iOS Safari对分散设置的border属性（比如先设border:none再单独改border-bottom-width）有时候会出现解析冲突，或者因为元素的默认样式、行内元素的渲染特性导致异常。

优化后的解决方案 #

试试用更简洁且针对性的写法，让渲染引擎明确你的意图，避免冗余属性带来的歧义：

/* 先彻底重置边框和外轮廓 */
.your-target-element {
  border: none !important;
  outline: none !important;
  /* 用border-bottom简写直接设置底部边框，清晰无歧义 */
  border-bottom: 2px solid rgb(54, 71, 112);
  /* 可选：防止iOS点击高亮干扰视觉 */
  -webkit-tap-highlight-color: transparent;
}

额外排查小技巧 #

如果还是有奇怪线条，不妨检查这几点：

• 元素是否有box-shadow属性不小心生成了额外阴影线条
• 看看元素是不是行内元素，给它加上display: inline-block或者display: block，行内元素的边框在iOS上渲染容易出问题
• 如果是表格相关元素，试试添加border-collapse: separate避免边框合并的异常

为什么原代码可能失效？ #

你写了很多分散的border属性（border:none; border-width:0px; border-bottom-width:2px;），虽然逻辑上没问题，但iOS Safari的渲染引擎对这种分步设置的border属性偶尔会出现“理解偏差”，用border-bottom简写能直接明确告诉浏览器要显示的底部边框样式，减少冲突概率。

内容的提问来源于stack exchange，提问作者hkrlys