css - IE7 Cleafix 不工作

Question

我在此页面上遇到 IE7 和浮动清除问题：

https://dev.editionpatrickfrey.com/de/books/miss-martin-guggisberg

我正在使用 Sass pie-clearfix(); mixin 并尝试了所有可能的其他 clearfixes 都没有成功。这里有什么问题？

Answer 1

下面的 ClearFix 可以应用于浮动子元素的父级和/或作为浮动元素下方的元素。这应该涵盖 IE6 - IE10。

.clear:before,
.clear:after {
    content: "";
    display: table;
} 
.clear:after {
    clear: both;
}
.clear {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

我个人使用此 ClearFix，但要了解有关此 ClearFix 的更多信息，请查看此链接：http ://css-tricks.com/snippets/css/clear-fix/

希望这可以帮助！

Answer 2

您需要将 floatstop 添加到包含浮动元素的父元素：

CSS：

.floatstop:after {
 content: ".";
 display :block;
 height :0;
 clear :both;
 visibility :hidden;
}
*:first-child+html .floatstop {min-height: 1px;}/* ie7 fix */
* html .floatstop {height: 1%;}/* ie6 fix */

HTML：

<div class="floatstop">
 <div>floated div</div>
 <div>floated div</div>
</div>

Answer 3

我意识到我需要一个包装容器来做到这一点。我只是想在一层上清除浮动元素。使用 Sass pie-clearfix() 添加容器；mixin 解决了这个问题。