html - Div 标签在 IE 中不展开 .. 在所有其他浏览器中正常

Question

我整天都在为这个问题烦恼。任何帮助将不胜感激!!

我在 Chrome、IE 和 Safari 中有一排 div，在此处放置许多行会将外部 div (.formRow) 推得更高以适应扩展内容......在 IE 中，div.formRow 只是保持相同的大小并且内容低于 div.formRow 的底部。我已经尝试了一切......任何人都有任何想法......

这是我的 HTML:

<div class="formRow clear">
    <div class="leftCell">
        This is on the left<br>
        This is a new line<br>
        In FF and Chore, these new lines push the outer div down<br>
        In IE, theselines just go over the botto of the outer div and it doesn't expand
    </div>
    <div class="rightCell">
        This is on the right
    </div>
    <div class="rightNote">
        X
    </div>
    <br class="clear">
</div>

这是我为这个 HTML 编写的 CSS:

br.clear {
    clear:both;
}
div.formRow {
    border-bottom: 1px solid #e4e4e4;
    padding:20px;
    font-size:11px;
    color:#6a6a6a;
}
div.formRow div.leftCell {
    width: 73%;
    float:left;
}
div.formRow div.rightCell {
    width: 20%;
    float:left;
}
div.formRow div.rightNote {
    width: 7%;
    float:left;
}

非常感谢您的帮助

Answer 1

而不是使用 <br/>最后，再做一个<div></div> .

参见 this jsfiddle LIVE DEMO

替换...

    <br class="clear">

与...

    <div class="clear"></div>

并替换...

br.clear {
  clear:both;
}

与...

div.clear {
  clear:both;
}