Question

我有一个奇怪的问题，只出现在chrome中。版本42.0.2311.135，如果是问题的一部分。 Internet Explorer和firefox正确呈现页面。

jsfiddle demo：http://jsfiddle.net/53m8arfy/

＆＃13;

div.left {float: left;}
div.right {float: right;}
h1.broke {border-bottom: 1px solid #e2e2e2; display: inline-block; width: 100%;}
h1.works {border-bottom: 1px solid #e2e2e2;}

＆＃13;

<h1 class="broke">header</h1>
<div class="left">
    <p>short content</p>
</div>
<div class="right">
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
</div>
<br style="clear: both;" />
<div class="left">
    <p>short content</p>
</div>
<div class="right">
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
</div>
<br style="clear: both;" />
<div class="left">
    <p>short content</p>
</div>
<div class="right">
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
</div>
<br style="clear: both;" />

＆＃13;

顶部的h1设置为class =＆＃34; break＆＃34;。如果你看到我是什么，下面的所有花车都搞砸了。

将顶部的h1更改为class =＆＃34;工作＆＃34; [删除内联块和相关宽度]使一切都快乐。

我的google-fu无法找到任何错误报告或其他任何有此问题的人，尽管这不是最容易搜索的内容。

Answer 1

将<br style="clear:both" />替换为<div style="clear:both"></div>时，它可以正常工作。

似乎是Chrome处理<br>的专长。问题是chrome中的<br>的宽度和高度设置为auto，这可能是零。

在查看CSS Spec时，我发现没有明确定义高度和宽度设置为auto的空元素是否具有sides of an element's box(es) [which] may not be adjacent to an earlier floating box.但是，进一步挖掘，我发现以下内容也适用于Chrome：

<br style="clear: both; height:2px" />

虽然这个“不起作用”，但在Firefox和IE中（我通过查看Chrome的<br>默认CSS获得了CSS）：

<div style="display:inline; clear: both; width:auto; height:auto; "></div>

所以这不是关于CSS规范，而是（未解决的，非标准化的）问题，默认CSS样式应用于哪个HTML元素。

Answer 2

我建议删除<br>元素，因为它们没有语义含义，并将clear:both规则添加到您当前拥有的div.left规则中：

＆＃13;

div.left {
  clear: both;
  float: left;
}
div.right {
  float: right;
}
h1.broke {
  border-bottom: 1px solid #e2e2e2;
  display: inline-block;
  width: 100%;
}
h1.works {
  border-bottom: 1px solid #e2e2e2;
}

＆＃13;

<h1 class="works">header</h1>
<div class="left">
  <p>short content</p>
</div>
<div class="right">
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
</div>
<div class="left">
  <p>short content</p>
</div>
<div class="right">
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
</div>
<div class="left">
  <p>short content</p>
</div>
<div class="right">
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
</div>

＆＃13;

Answer 3

我不知道您为什么不使用text-align:right;而不是段落元素的浮点数。

h1显示：内联块混乱浮动。潜在的铬虫？

3 个答案: