一个 <hr> 标记在 Firefox 中有效，但另一个无效。这是为什么？

Question

所以我在我的页面上使用了两个 HR 标签来屏蔽导航下方的一大块精美印刷品。它们的样式使用外部 CSS 文档和 "class" 规范。

到目前为止它在 Chrome 和 Safari 中工作，但是当我在 Firefox 中测试它时，其中一个 HR 标签出现了（底部的那个），但另一个没有？？？怎么一个出现一个不出现？对我来说没有任何意义。

我为 header 添加了完整的 html 以防干扰，您可以在 HTML 底部附近的 FINE PRINT 下找到 hr 标签。

感谢您的帮助。

HTML

/* BLACK LINE */

hr.plain {
  border-style: inset;
  border-top: 1px solid;
  border-bottom: 0px;
  border-bottom: none;
  border-left: none;
  margin: 4px;
  display: block;
  height: 1px;
}
/* BLACK LINE END */

<!-- NAVIGATION -->
<div id="nav-wrap" class="bgcolor" style="width: 1000px;
     height: 139px;
        text-align:center;
        z-index: 50;
        ">

  <div class="bgcolor" style="width: 200px;
        height: 62px;
        padding-top: 32px;
        float: left;
        text-align: left;">

    <a href="index.html">
      <img src="bk-logo.png" alt="BK Logo" height="36px" width="54px" />
    </a>
  </div>


  <!-- LINKS -->
  <div class="bgcolor" style="width:800px; 
            height: 45px; 
            text-align: right;
            padding-top: 50px;
            float: left;">
    <a href="listings.html" class="hover" style=" text-decoration:none;" title="Refresh Page">
      <span class="black mainlinks">Listings&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
    <a href="approach.html" class="hover" style=" text-decoration:none;">
      <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Approach&nbsp;&nbsp;&nbsp;&nbsp;</span>

    </a>
    <a href="press.html" class="hover" style=" text-decoration:none;">
      <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Press&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
    <a href="contact.html" class="hover" style=" text-decoration:none;">
      <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Contact</span>
    </a>
  </div>
  <!-- LINKS END -->


  <!-- FINE PRINT -->
  <div>
    <br />
    <hr class="plain bgcolor black">
    <span style="font-size: 9px; 
     font-family: DIN Next W01 Light, Helvetica, Arial, sans-serif;
        letter-spacing: 0.1em;
        color:#7A7A7A">
       BORIS KHOLODOV &#183; REAL ESTATE BROKER &#183; #1 IN DOWNTOWN AND CENTRAL TORONTO BY NUMBER OF LISTINGS SOLD &#183; ROYAL LEPAGE REAL ESTATE SERVICES LTD &#183; JOHNSTON AND DANIEL DIVISION, BROKERAGE</span>
    <hr class="plain bgcolor black">
    <!-- FINE PRINT END -->
  </div>
</div>
<!-- NAVIGATION END -->

Answer 1

试试这个代码

<!-- LINKS -->
<div class="bgcolor" style="width:800px;
  height: 45px;
  text-align: center;
  padding-top: 50px;
  margin:0 auto;">
  <a href="listings.html" class="hover" style=" text-decoration:none;" title="Refresh Page">
    <span class="black mainlinks" >Listings&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </a>
  <a href="approach.html" class="hover" style=" text-decoration:none;">
    <span class="black mainlinks" >&nbsp;&nbsp;&nbsp;&nbsp;Approach&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </a>
  <a href="press.html" class="hover" style=" text-decoration:none;">
    <span class="black mainlinks" >&nbsp;&nbsp;&nbsp;&nbsp;Press&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </a>
  <a href="contact.html" class="hover" style=" text-decoration:none;">
    <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Contact</span>
  </a>
</div>
<!-- LINKS END -->
<!-- FINE PRINT -->
<div style="text-align: center;"><br />
  <hr class="plain bgcolor black">
  <span style="font-size: 9px;
  font-family: DIN Next W01 Light, Helvetica, Arial, sans-serif;
  letter-spacing: 0.1em;
  color:#7A7A7A">
  BORIS KHOLODOV &#183; REAL ESTATE BROKER &#183; #1 IN DOWNTOWN AND CENTRAL TORONTO BY NUMBER OF LISTINGS SOLD &#183; ROYAL LEPAGE REAL ESTATE SERVICES LTD &#183; JOHNSTON AND DANIEL DIVISION, BROKERAGE</span>
  <hr class="plain bgcolor black">
  <!-- FINE PRINT END -->
</div>
</div>
<!-- NAVIGATION END -->

Answer 2

这个问题的第一个答案很好地描述了为什么使用 hr 通常不是一个好主意： HR displayed different in Firefox

最好使用带底边框的 div。它会更可靠。

Answer 3

您需要清除浮动元素。将 clear:both 添加到您的 hr 规则：

hr.plain {
    border-style: inset;
    border-top: 1px solid;
    border-bottom: 0px;
    border-bottom: none;
    border-left: none;
    margin: 4px;
    display: block;
    height: 1px;
    clear:both;
}

jsFiddle example

一个 <hr> 标记在 Firefox 中有效，但另一个无效。这是为什么？

One <hr> tag is working but not the other in Firefox. Why is that?

html

css

firefox