css的 line-height 在ios与安卓间的问题

Question

css 调节一个加号按钮，其中需要用到 line-height 属性，完成的按钮在 pc，安卓端显示正常，在ios端则出现 1px
到2px 的向下偏移，如何解决这个问题

pc [微信开发者工具]

安卓

ios

样式代码

Answer 1

如果你的 + 号是用文本书写的, 那这个是真没辙. 不同平台(尤其安卓)字体不同，对应的字体(基线/上端下端)等等都不同, 继而尽管代码上是居中了的, 但基线底下那部分空白就是会产生视觉上的误差.

比较靠谱的完美兼容办法:

1. + 号使用背景图
2. + 号用伪元素绘制

顺便一提, 你上面的代码中, display: inline-block 可以干掉. float: left 会使 display 计算值为 block, 你写 inline-block 是不必要的.

Answer 2

你用的是文字的+吧，可能是字体的原因