Question

我第一次注意到这一点，但可能很容易。为什么IE和Chrome会给字体带来不同的高度？打击这个的最佳做法是什么？这会弄乱我的标题布局，我试图让它在所有浏览器上看起来都一样。

Imgur

生成Img的代码：

<html>
<head>    
<style>
    body{margin:0;}
    div {
        margin-top: 5px;
        font-size:16px;
    }
    .c1 {
        font-family: Arial;
        background: blue;
    }
    .c2 {
        font-family: Lucida Sans Unicode;
        background: red;
    }      
</style>
</head>
<body>
    <div class="c1"> My Text 1 </div>
    <div class="c2"> My Text 2 </div>
</body>
</html>

编辑： - 另外这是一个相互叠加的文字图像。文本高度（以像素为单位）各自相同，但问题似乎是它们不会在文本的顶部和底部使用相同的边距/填充（无论它是什么）。

Imgur

Answer 1

这只是因为您还没有设置font-size，因此它使用该浏览器的默认大小。我尝试了代码并且做了同样的事情，但是在设置了一个尺寸后它就不再出现了。

div { margin-top：5px; font-size：30px; }

根据您的了解，您可以使用rem按默认浏览器大小设置大小，如下所示：

div { margin-top：5px; font-size：1.5 rem; }

这为您提供了浏览器默认大小的1.5倍。

<强>更新

问题似乎出现在line-height中，您应该为div设置。它也可能是div的padding。尝试设置这些，我希望它有所帮助。如果没有，请尝试设置div display: block。

Answer 2

您是否尝试过为网页设置默认设置？

这个问题实际上看起来像是行高。浏览器倾向于以不同的浏览器呈现不同的浏览器。尝试设置默认值。

行高实际上会改变文本所在行的大小。在这种情况下可能会填充...

行高余量填充字体大小

你应该/可以设置很多默认值。这不能确保从一个浏览器到下一个浏览器的外观相同。它确实有很多帮助。

祝你好运！

为什么IE中的文字（字体）存在高度差异

2 个答案: