水平标尺不会出现在Firefox中

Question

我的包装器分为3列，带有简单的网格（浮动）。

在每个第三列之后，jQuery会像这样放置一个水平标尺：

<div class="col-1-3">a</div>
<div class="col-1-3">a</div>
<div class="col-1-3">a</div>
<hr>
<div class="col-1-3">a</div>
<div class="col-1-3">a</div>
<div class="col-1-3">a</div>
<hr>

等等......

这适用于Internet Explorer和Chrome，但Firefox由于某种原因不会显示这些<hr>标记。

示例：

http://markefka.phinksta.de/leistung.php

Answer 1

如果使用Inspector工具查看它，则会显示<hr>标记，但它们的位置并不像您期望的那样。由于<div>元素是浮动的，要在它们之后显示<hr>，您需要：

hr {
  clear: both;
}

添加此功能似乎符合您的期望。

供参考：clear CSS property

Answer 2

那是因为你使用了错误的语法。在对你的问题的评论中，建议也是错误的。 始终依赖官方文档或非常好的来源。

hr的正确语法是<hr>，没有结束标记。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

检查这个小提琴：http://jsfiddle.net/Zp83F/

试试Firefox上的小提琴。

修改

另外看看你的实际代码，就像弗拉迪米尔帕兰特说的那样：加上一个明确的：两个;可以解决问题。