html - 为什么在 IE 中文本(字体)存在高度差异

标签 html css

我第一次注意到这一点,但可能很容易。为什么 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

最佳答案

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

这个问题其实看起来是line-height。 浏览器倾向于从一个浏览器到下一个浏览器呈现不同的东西。尝试设置默认值。

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

行高 利润 填充 字体大小

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

祝你好运!

关于html - 为什么在 IE 中文本(字体)存在高度差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23523726/

相关文章:

javascript - 重叠标签 JS CSS HTML

javascript - loadStyleFixtures 不会在 Jasmine 测试中加载 css

html - 语义 ui 元素没有响应

jquery - css 选择器 vs jquery 遍历

html - 绝对长度单位的准确性

javascript - P 元素复制到输入值并仅选择一项

javascript - 缩略图刷新时禁用scrollIntoView()的自动垂直滚动

php - 如何从多个 SQL 表中获取值并在 html/php 表中显示?

javascript - 当选项卡位于后台时,SoundCloud 小部件 .play() 方法不起作用(Chrome)

css - Bootstrap : How to make table inside another table responsive with horizontal scrollbars on mobile devices?