hr标记在firefox中无法正常工作

时间：2015-07-13 07:06:06

标签： html css

这是我有效的代码：

＆＃13;
＆＃13; 
.row {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #98bf21;
  box-shadow: 10px 10px 5px #888888;
  box-sizing: border-box;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  text-align: justify;
  width: 100%;
}
hr {
  display: block;
}
.row2 div {
  float: left;
}
.tblalt {
  overflow-y: auto;
  width: 100%;
}
.tblalt .left {
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-right: 5px;
  width: 30%;
}
.tblalt .right {
  border-left: 1px solid #0f0f0f;
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-left: 2px;
  width: 70%;
}
＆＃13; 
<section class="row row2">

  <h3>Albert Einstein,  1879 - 1955 </h3>

  <p>US(German-born) Physicist</p>
  <hr>
  <div class="tblalt">
    <div class="left"><b>Source</b>

    </div>
    <div class="right"><b>Quotations</b>

    </div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Before God we are all equally wise and equally foolish.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Few people are capable of expressing with equanimity opinions which differ from the prejudices of their social environment. Most people are even incapable of forming such opinions.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never think of the future - it comes soon enough. Imagination is more important than knowledge ...</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is miracle that curiosity survives formal education.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is the supreme art of the teacher to awaken joy in creative expression and knowledge.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Laws alone can not secure freedom of expression; in order that every man present his views without penalty there must be spirit of tolerance in the entire population.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.</div>
  </div>
  <hr>
</section>
＆＃13;
＆＃13;
＆＃13;

hr标记在Chrome中正常运行：

enter image description here

但是hr标记在firefox中无效：

enter image description here

我的网站网址：http://englishact.com/Quotations/AlbertEinstein.php

关于如何解决问题的任何想法？

3 个答案:

答案 0 :(得分：8)

为<hr>标记添加此内容。

hr {
clear: both;
}

来源：click here

答案 1 :(得分：2)

这是因为hr元素实际上位于浮动的.tblalt元素旁边。

要使hr元素显示在.tblalt元素下，您需要确保它们设置为clear: left;，以便清除左侧浮动的.tblalt元素。

  

clear CSS属性指定元素是否可以在旁边   在它之前的浮动元素或必须向下移动（清除）   在他们之下。 clear属性适用于浮动和   非浮动元素。

     

当应用于非浮动块时，它会移动边框的边缘   元素向下，直到它低于所有相关浮点数的边缘。   这种运动（当它发生时）导致边缘坍塌不会发生。

（https://developer.mozilla.org/en-US/docs/Web/CSS/clear）

＆＃13;
＆＃13; 
.row {
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #98bf21;
  box-shadow: 10px 10px 5px #888888;
  box-sizing: border-box;
  font-size: 1.2em;
  line-height: 1.6em;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  text-align: justify;
  width: 100%;
}
hr {
  clear: left;
  display: block;
}
.row2 div {
  float: left;
}
.tblalt {
  overflow-y: auto;
  width: 100%;
}
.tblalt .left {
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-right: 5px;
  width: 30%;
}
.tblalt .right {
  border-left: 1px solid #0f0f0f;
  box-sizing: border-box;
  float: left;
  overflow-y: auto;
  padding-left: 2px;
  width: 70%;
}
＆＃13; 
<section class="row row2">
  <h3>Albert Einstein,  1879 - 1955 </h3>
  <p>US(German-born) Physicist</p>
  <hr>
  <div class="tblalt">
    <div class="left"><b>Source</b></div>
    <div class="right"><b>Quotations</b></div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Before God we are all equally wise and equally foolish.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Few people are capable of expressing with equanimity opinions which differ from the prejudices of their social environment. Most people are even incapable of forming such opinions.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">I never think of the future - it comes soon enough. Imagination is more important than knowledge ...</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is miracle that curiosity survives formal education.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">It is the supreme art of the teacher to awaken joy in creative expression and knowledge.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Laws alone can not secure freedom of expression; in order that every man present his views without penalty there must be spirit of tolerance in the entire population.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.</div>
  </div>
  <hr>
  <hr>
  <div class="tblalt">
    <div class="left">-</div>
    <div class="right">Reading, after a certain age, diverts the mind too much from its creative pursuits. Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.</div>
  </div>
  <hr>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

使用<hr>分隔内容有点像黑客:-) 为什么不尝试设计实际内容：

.tblalt {
    overflow-y: auto;
    width: 100%;
    border-top: 1px dotted blue;
    border-bottom: 1px dotted blue;
    margin-bottom: 10px;
}
相关问题
最新问题