为什么同一页上的<hr>元素呈现不同的效果？

Question

4

我有一个页面，是一份能源新闻通讯的在线版，每个故事都用<hr>分隔。我今天刚注意到其中一个渲染尺寸为680px x 2px而不是680 x 1px。

检查了元素后，我发现高度来自这个CSS条目："height: 0.1em;"。我想知道为什么浏览器似乎认为这个需要不同的厚度，而其他的不需要？（我知道这并不太重要，但它一直在困扰着我，肯定会有人知道！）

- slugmandrew

2个回答

3

Eipark建议您使用em而不是像素来格式化HR条。

一个非常简单的解决方法是

在Style.css中查找第67行hr {并将下面的代码更改为：

从这个：

height: 0.1em;

转化为这样

height:1px;

- bybe

我明白了。我只是好奇想更多地了解 em 大小，因为我对它们不太了解 :) - slugmandrew

我接受了这个答案，因为它是我实际用来解决问题的方法，但是 eipark 在下面提到使用相对字体大小与其他相对大小一起使用的评论值得一读。 - slugmandrew

你的问题是为什么，而不是如何解决它。你应该接受那个主要回答了你问题的答案。 - eipark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eipark · Accepted Answer

一个em不是一个绝对的度量单位，它是与你的字体大小成比例的。很可能，这两个不同的<hr>标签继承了不同的字体大小，因此计算0.1em的方式也不同。