浏览器之间的区别

Question

我有一个问题。我想知道如何解决以下示例：

我用“div”标签创建html页面，在浏览器中看起来不同......

CSS代码：

*{
    margin:0;
    padding:0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

@font-face{
    font-family:myFont;
    src:url('PTN57F.ttf');
}

body{
    background:#f5f5f5;
}

.content{
    width:200px;
    height:30px;
    background:#EEE;
    border:1px solid #CCC;
    margin:auto;
    margin-top:40px;
    font-size:16px;
    font-family:myFont;
    text-align:center;
}

浏览器不同：

问题在于字体粗细和填充。对此有什么解决方案吗？

Answer 1

不同的浏览器/系统具有不同的渲染引擎，因此它们呈现的输出将是不同的。没有人认真对待webdev就会抱怨它。这就是它的方式 - 处理它：）

Answer 2

我会通过css明确设置两个东西，它应该给你一个更接近的跨浏览器体验：

font-weight: 300 //<-- this can be 100, 200, 300...900
line-height: 1.5em // <-- this is em or px and should be roughly 1.5x your font size

Answer 3

您可以使用normalize.css文件使浏览器尽可能地显示所有内容。

http://necolas.github.io/normalize.css/

Answer 4

我认为问题在于屏幕分辨率，典型显示器中的1000px将是 N santimeters，但在高分辨率显示器中，它将是 N - x ，其中x是屏幕分辨率差异，这就是为什么你的margin-top：40px呈现不同，尝试使用margin-top：5％