为什么我的<hr />元素在同一页面上的呈现方式不同?

时间:2013-01-11 13:59:29

标签: html css

我有一个页面是能源时事通讯的在线版本,每个故事由<hr>分隔。我今天才注意到其中一个渲染为680px x 2px而不是680 x 1px。

在检查了元素后,我看到高度来自这个css条目:“height:0.1em;”并且想知道为什么浏览器似乎认为这个而不是其他人需要不同的厚度? (我知道这不重要,但它只是在烦扰我,有人必须知道!)

这是页面:http://utilitiessavings.co.uk/utilities-insider-issue-10-january-2013/

由于

2 个答案:

答案 0 :(得分:4)

em不是绝对的度量单位。它与您的字体大小成正比。有可能,两个不同的<hr>标签继承了不同的字体大小,因此以不同的方式计算0.1em。

参考:http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/

答案 1 :(得分:3)

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

非常简单的修复就是

使用Style.css查找67小时行{并更改以下代码

来自此

height: 0.1em;

到此

height:1px;