如何解决iOS Safari中a标签样式与其他浏览器不一致的问题？

嘿，我太懂这个问题了！iOS Safari有个自带的小特性——它会自动给能触发触摸的元素（比如你的<a>标签）加上一层高亮样式，这就是你看到的那种没在代码里设置的颜色，桌面浏览器没这个默认行为，所以两边显示不一样。

为啥会这样？ #

这是Safari为了移动端交互体验设计的默认效果，用来提示用户“这个元素是可点击的”，但有时候确实会打乱我们的自定义样式。

怎么解决？ #

很简单，给你的链接元素加个WebKit私有属性就能干掉这个默认高亮：

.about-more-wrapper a {
    -webkit-tap-highlight-color: transparent; /* 关键属性 */
    /* 保留你原来的所有样式 */
    cursor: pointer;
    color: #666666;
    display: block;
    height: 100%;
    min-height: 40px;
    margin-top: 0;
    padding-left: 1.625rem;
}

额外说明 #

-webkit-tap-highlight-color是Safari这类WebKit内核浏览器的专属属性，用来控制触摸时的高亮颜色。设成transparent就完全移除高亮了，要是之后想自己定义高亮的透明度或颜色，也可以写具体的色值，比如rgba(16,16,16,0.1)这种。

对了，你的伪元素样式是侧边的竖线，和这个颜色问题没关系，不用动它们~

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