css - IE7 float 在其父位置为 :relative 时消失

Question

这是我在使用 IE7 时遇到的问题的精简版。在所有其他(较新的)浏览器中，这显示正常...为什么 position:relative;对 float: right; 有影响或 float: left; ？有没有办法保留 position: relative在不牺牲 float 功能的情况下？

JS fiddle :http://jsfiddle.net/uW7JV/2/

没有position: relative;

与 position: relative; (红框内)

更精简的版本:http://jsfiddle.net/uW7JV/4/

有趣...删除 <div class="clearboth"></div>允许显示内容。但是，我确实需要那里的功能，所以我仍在寻找修复方法。 http://jsfiddle.net/uW7JV/9/

Answer 1

您需要添加 overflow: hidden至 .column-wrapper以便它包裹它漂浮的 child 。你不需要 .clearboth div 和 CSS 在你这样做之后。

您需要解决的另一个问题是列宽，因为 box-sizing: border-box在 IE7 中不受支持，分配 width 时需要考虑填充.

div {
    padding: 5px 1%;
}
.column-wrapper {
    background: orange;
    position: relative;
    overflow: hidden;
}

.main {
    background: yellow;
    float: right;
    width: 64.6%;
}
.sidebar {
    float: left;
    background: green;
    width: 31.3%;
}

演示:http://jsfiddle.net/myajouri/uW7JV/15/

解决此问题的另一种方法是使用 Clearfix hack

.clearfix {
  zoom: 1; /* for IE6/7 */
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

然后添加 clearfix类别为 .column-wrapper .