0

我正在创建一个高度灵活的 sass/grid 框架，我遇到了一些奇怪的 IE7 浏览器问题，我不完全理解它们为什么会发生。

小提琴在这里：http: //jsfiddle.net/adrianjacob/mbvw5/

（对大多数人来说，最简单的测试方法是在 IE9/IE10 中使用 IE 开发栏运行 IE7 模式）

ref 的代码（和 cos 堆栈溢出不会仅通过小提琴链接发布此 q）：

<div id="container1">
    <div class="row clearfix">
        <div class="col1">col1</div>
        <div class="col2">row width == 398</div>
        <div class="col3">col3</div>
    </div>
</div>
<br>
<div id="container2">
    <div class="row clearfix">
        <div class="col1">col1</div>
        <div class="col2">row width == 400</div>
        <div class="col3">col3</div>
    </div>
    <br>
    <div class="row">
        <div class="col1">col1</div>
        <div class="col2">row width == 400</div>
        <div class="col3">col3</div>
        <div class="clear"></div>
    </div>
</div>

#container1 { margin:0 auto; width:398px; }
#container2 { margin:0 auto; width:400px; }
.row { background:red; width:100%; }
.col1 { float:left; width:13%; margin:1%; background:pink; }
.col2 { float:left; width:63%; margin:1%; background:yellow; }
.col3 { float:left; width:18%; margin:1%; background:cyan; }

.clear { clear:both; }
.clearfix { zoom:1; }
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }

这里发生了两件非常不同的事情，我希望人们对此发表意见：

  1. 为什么新的 micro clearfix 不能工作/显示边距/显示红色背景，就像在小提琴底部发现的旧时尚一样清除两个 div？

  2. 为什么当容器为 400 像素时，列很好，但使用 398 像素的容器会向下推第三列并将其换行？

请注意，在 IE8+ 和所有其他优秀的浏览器上，这不是问题。我确定 IE6 也受到影响，但我无法测试。

广告。

4

0 回答 0