Question

我有一个网站在FF 19（它什么时候变得如此之高？），IE，Opera，但不在Chrome或Safari中正常工作。有时它在Chrome / Safari中正确布局，但是如果你足够F5，那么其中一个渲染会意外地将它打好。

以下是链接http://www.spokanewastewater.org/Businesses.aspx

左侧边栏为float:left，内容全部位于包含display:inline-block的div中，所有3个链接列表均为float:left，因此在“行业角色”中有{ {1}}之前。然而有时chrome / safari喜欢将段落放在“重要链接”部分之上？这与webkit渲染有关吗？奇怪的是，它有时只会被打破并且击中f5足以打破它。

Answer 1

请勿使用br来控制clear。将您的br更改为更合适的内容（实际为div）：

<div style="clear: both"></div>

使用您网站上Chrome中的开发工具进行更改可以解决问题。

Answer 2

在这个时代使用额外的标记清除浮动是非常古老的。有两种广泛接受的清除浮动的技术，不需要额外的标记。

http://codepen.io/cimmanon/pen/qDjdr

溢出：

.parent {
    overflow: hidden;
}

Micro Clearfix：

http://nicolasgallagher.com/micro-clearfix-hack/

.parent:before,
.parent:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.parent:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.parent {
    *zoom: 1;
}

清除漂浮不起作用

2 个答案: