OSX和Windows上的文本之间的1像素垂直差异

Question

我有一个非常简单的按钮，标记如下：

<a href="#" class="common_cta buttons send_inquiry">
    <span>Back to homepage</span>
</a>

<a>元素的计算样式如下所示：http://pastebin.com/u9q6BDHx

<span>的计算样式如下所示：http://pastebin.com/P9mR7yHF

以下是Windows与OSX的对比：

正如您所看到的，Windows与其他所有内容之间存在一个像素差异。设计人员要求这是一个像素完美的实现，我不知道如何解决专门针对OSX的问题。

我该如何解决这个问题？

Answer 1

o你会发现每个浏览器在处理CSS的方式上至少会略有不同。例如，我的公司的网站使用一些疯狂的搜索引擎优化“技巧”来获取页面中更高的部分，如Goggle和用户看到信息的位置所示。因此，我编写的一些CSS需要特定于浏览器的调整。

我相信您正在寻找的内容与以下内容类似，允许使用每个浏览器的各个样式：

.win.ie .buttons {padding:3px 5px;}
.mac.gecko .buttons {padding:4px 5px;}
.chrome .buttons {padding:4px 6px;}
.win.gecko .buttons{padding:4x 6px;}