与FireFox，IE8和Chrome相比，为什么Safari中的按钮看起来更大？

Question

与FireFox或IE8相比，我有一个网站的标题在Safari中查看时未对齐。我发现这是由Safari中的按钮比其他浏览器看起来更大。什么CSS可以在Safari中解决这个问题？

以下是比较Safari和Firefox的屏幕截图：

http://webypedia.com/wp-content/uploads/2010/08/Safari-buttons-are-larger-than-Firefox-e1282788166774.gif

以下是发生错位的主页：

http://webypedia.com

Answer 1

您应该将按钮的行高设置为11px。

按钮高度使用行高+填充+任何边框计算.Safari似乎有一个默认的行高不同于其他浏览器。

Answer 2

要平滑特定于供应商的默认CSS，通常的做法是使用“CSS重置”。 就个人而言，我喜欢the one in YUI。来自网站：

  

基础CSS重置删除了浏览器提供的HTML元素的不一致样式。这创造了一个可靠的平坦基础。加载CSS重置后，编写项目所需的显式CSS。

假设您的重置样式表“很好”，那么绝大多数跨浏览器差异（例如按钮大小问题）将被消除。