css - 字体渲染问题(MAC 与 Windows)

Question

我有一个网站，我在其中使用了 css @font-face 声明。 然后，在我的 html 中，我使用 html-entities 来显示矢量图像。

这适用于 Mac 上的所有网络浏览器(Chrome、Firefox、Safari、Opera)。 它也适用于 Windows 中的相同浏览器(包括 IE9 +)。

但是，在 Windows 浏览器中，图标顶部有填充。

查看我的屏幕截图(Chrome MAC 与 Chrome Windows):

Chrome MAC:

Chrome Windows:

你们知道可以解决这个问题的方法吗？

Answer 1

代替

.header #link_home_home a, .header #link_search a {
width: 100%;
height: 100%;
display: block;
padding: 18px 20px 15px 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 7px;
}

尝试:

 .header #link_home_home a, .header #link_search a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 18px 20px 15px 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 7px;
    }

Padding 最有可能有不同的渲染。如果这不起作用并且您想要一个更干净的解决方案，您应该在 css 之上使用 css 重置样式表。看这里:http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/