一个<hr />标签正在运行，但在Firefox中没有。这是为什么？

Question

所以我在我的页面上使用两个HR标签来阻止导航下的一大块精细打印。他们使用外部CSS文档和＆＃34;类＆＃34;进行了样式设置。说明书

到目前为止，它适用于Chrome和Safari，但是当我在Firefox中测试时，其中一个HR标签显示（底部的那个），但另一个不是？如何出现，另一个不出现？对我没有任何意义。

我包含标题的完整html以防干扰，您可以在精细打印下找到HTML底部附近的hr标记。

感谢您的帮助。

HTML

＆＃13;

＆＃13;

/* 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 */

＆＃13;

<!-- 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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要清除浮动元素。将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

Answer 2

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

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

Answer 3

试试这段代码

＆＃13;

＆＃13;

<!-- 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 -->

＆＃13;

＆＃13;

＆＃13;