IE7 'float: right' drop bug 的干净 CSS 修复

Posted 2023-03-06

【中文标题】IE7 \'float: right\' drop bug 的干净 CSS 修复

【英文标题】：Clean CSS fix of IE7's 'float: right' drop bugIE7 'float: right' drop bug 的干净 CSS 修复

【发布时间】：2012-06-14 10:57:00

【问题描述】：

我不断发现自己在 IE7 中浮动元素时遇到问题。

我已经阅读了许多与此类似的 Stack Overflow 问题，但似乎没有任何始终如一的干净 CSS 答案。

我的意思是我希望看到不要更改 HTML 的答案。例如：

先放浮动元素 在浮动元素后添加一个“clear: both”div。

我了解有时浮动元素不会考虑其父元素的高度，因此有时无法正确包含它。有时我发现自己用 zoom: 1 为元素“添加布局”，有时会修复它。其他时候，我发现自己在一个有条件的 IE7 样式表中搞砸了，这在我看来并不是最好的解决方法。

注意：我所说的“有布局”是什么意思 - http://www.satzansatz.de/cssd/onhavinglayout.html

我还阅读了有关使用相对和绝对定位（分别为父 div 和子 div）的其他答案。这会将其拉起，但通常会影响周围的 div。

如果有人可以深入解释发生这种情况的原因并详细讨论各种修复，我很乐意为这个问题添加赏金，仅适用于 CSS！ p>

非常感谢！

编辑

我遇到的最常见的问题是当我遇到这样的事情时：

左侧边栏 - 主要 - 右侧边栏

右浮动时通常会掉落。理想情况下，这应该是 Left - Right - Main 的格式，但我不断发现自己的样式开发人员工作（主要是 Drupal）在这种情况下，让他们改变他们的工作太麻烦了。有道理？因为我在为开发人员设计样式，所以他们从不把透明块也放进去（我个人认为这无论如何都是可怕和肮脏的！）

【问题讨论】：

这应该很明显，因为IE7没有正确解析一些css样式，所以不可能有不改变html的答案。

你到底有什么问题？可以发fiddle吗？

嗨瑞克！您是否正在寻找特定的上下文？那么我们是在谈论您尝试并排布置的项目中的float: right 问题吗？或者也许是你试图拉出的组中的一个元素并放在所有元素的右侧？

这在IE 11中仍然是一个问题。我的“箭头”，它只是一个定义：float:right;的类。正在下降到右侧的下一行。这在 Chrome 和 Firefox 中不会发生。 IE 显然仍然很糟糕，即使在 Windows 10 中也是如此。无论如何，将 overflow:auto 添加到父容器会停止下降。

【参考方案1】：

您是否尝试过使用 clearfix 解决方案来折叠 div？对此有一些变化，并且有一个较新的版本，但我手头没有 url，但这是标准的 clearfix css，您将其添加到正在折叠并导致浮动元素 http://www.webtoolkit.info/css-clearfix.html 的父元素中。 Chris Coyer 在这里有更好的版本http://css-tricks.com/snippets/css/clear-fix/。

您说“我知道有时浮动元素不考虑其父元素的高度，因此有时无法正确包含它”这是真的，如果所有子元素都浮动，则父元素会崩溃。这是由于元素被从正常流程中删除，当这种情况发生时，父 div 无法计算其高度并折叠起来，就好像 div 内部没有任何东西一样。

但是在没有看到页面和您遇到的问题的情况下，我只能估计问题是由于 IE6-IE7 的 haslayout 属性造成的，这真的很烦人，他们从版本 8 开始对其进行了整理，但它确实增加了额外的开发时间你的构建。

但在大多数情况下，clearfix 解决方案是最好的，因为它不会向页面添加额外的标记，例如

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

这是旧的和过时的，应该避免。

如果您需要更多信息或者我没有回答问题，我希望这对您有所帮助。

【参考方案2】：

多年来，我们一直在使用 clearfix 解决方案。

.cf:after  content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; 
.cf  display: inline-block; 
html[xmlns] .cf  display: block; 
* html .cf  height: 1%; 

这是一个简单的 CSS 类，理想情况下，它必须应用于具有任何子浮动元素的容器。由于您完全不更改 HTML，因此您可以：

用您自己的 div 选择器替换所有出现的 .cf [或] 使用 JS 应用类（这很糟糕，因为用户会在页面完全加载前几秒钟看到一个损坏的布局）[或] 使用 php ob_start() + regex 来应用类 [or] 只需复古并使用表格重写所有内容（就像我们在 90 年代所做的那样）

【参考方案3】：

简介

您的标题表明希望看到对 float: right 删除错误的修复，但您的文字暗示了更广泛的范围希望看到“IE7 中元素浮动问题”的解决方案。该浏览器中的浮动元素（right 或left）存在许多一般性问题。尽管有人可能会质疑对IE7浏览器的支持是否值得更多关注，但对于某些人来说无疑会持续一段时间。因此，我将借此机会一次解决与该浏览器中的浮动有关的许多问题。请注意，下面的许多实验和参考资料都来自一个优秀的资源：@​​987654321@。

包含元素的 CSS

对于浮动元素的包含父元素，应设置以下 css：

.container 
    overflow: auto; /* forces clearing of the child float */
    zoom: 1; /* give it layout (this can be some other css that does likewise) */

确保它具有布局对于防止类型的边距和填充错误（一种躲猫猫错误）以及允许清除 overflow 很重要。对于一系列浮点数，如果希望容器上的padding 正常工作，可能需要更改某些 html。

关于float: right 的一个“丢弃”问题，您可能希望避免在容器上设置显式height 或max-height。 min-height 没问题。设置height 然后让float 比容器高会使IE7 无法处理以下元素。我发现没有纯 css 解决方案。

如果容器本身是position: absolute，则定位浮动可能会出现问题，这可能需要将浮动本身设置为position: absolute而不是浮动。

参考资料：

用于overflow 清除 -- http://www.quirksmode.org/css/clearing.html 边距 -- http://www.brunildo.org/test/IEFloatAndMargins.html Peek-a-boo -- http://www.brunildo.org/test/iew_boo.html 和 http://www.brunildo.org/test/iew_boo3.html 浮点序列填充 -- http://www.brunildo.org/test/IEmfloa.html 避免height -- http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/、http://www.brunildo.org/test/fenc7.html（以及该页面上的类似问题链接）。 容器是absolute -- Floating Too Far Right!

浮动孩子的 CSS

对于浮动的子元素，要设置的 css（除了float: right）取决于两件事：

绝对容器

同样，如上所述，absolute 的包含父级可能需要更改子级的处理方式。

浮点数也是一种结算元素

如果float 也将在其上设置clear，则可能会出现许多问题，这完全取决于它周围的元素的html 和css。没有单一的规范修复，因此请查看下面的参考资料。

参考资料：

容器是absolute -- Floating Too Far Right! 还有clear -- http://www.brunildo.org/test/IEWfc.html, http://www.brunildo.org/test/IEWfc2.html, http://www.brunildo.org/test/IEWfc3.html

浮动前容器子元素的 CSS

如果float: right 跟在html 结构中应该在其左侧（而不是在其上方）的元素之后，那么前面的元素必须是float: left。

浮动后容器子元素的 CSS

清晰的元素

对于在float 设置了clear 的元素之后，如果它有padding 和 background-color，请确保它也有布局到避免padding 加倍；这也防止了clear 上方由于容器padding 而产生的额外空间，并避免了其他margin 问题。

参考资料：

对于padding -- http://www.brunildo.org/test/IEClearPadding.html 和 http://www.brunildo.org/test/IEFloatClearPadding.html 对于margins -- http://www.brunildo.org/test/Op7_margins_float.html（浏览IE7页面）

清晰元素前的段落

在浮动元素和清除元素之间有一个带有margin-bottom 且高度比float 短的段落，可能会在clear 和float 之间产生一个额外的间隙，等于@ 987654380@。除了给段落一个零下边距（如果段落可能比浮动高，这可能是不可接受的）之外，没有已知的纯 css 修复。

参考：

以下段落 -- http://www.brunildo.org/test/IEFloatClearMargin.html

结论

我不能保证我已经解决了右浮动对象可能出现的所有问题，但肯定涵盖了许多主要问题。至于“为什么”会发生这些事情，完全是 IE7 中的“bugginess”。

【讨论】：

我认为float: right; display: inline; 修复了一个 IE6 错误，该错误已在 IE7 中修复（因此与问题无关）。

请解释为什么在 IE 11 中仍然会出现这种情况。包含元素仍然需要 overflow:auto 以防止浮动右元素下拉...在 Firefox 或 Chrome 中不会出现这种情况。跨度>

@Triynko：我无法回答你的问题。我在网页设计方面不像以前那么活跃了，所以我对 IE11 不是很熟悉（这个答案是关于 IE7 的！）。我建议您发布一个关于您在 IE11 中看到的问题的新问题（如果您实际上看到相似之处，也许可以交叉引用这个答案）。可能是 IE11 在这里重新引入了一些错误，也可能是效果相似，但原因完全不同。

【参考方案4】：

很简单：

如果您有float:right，请添加*clear:left。 或者你有float:left，添加*clear:right。

* 用于 IE7-

或用于验证 *+html .classclear:left/right

【参考方案5】：

我知道这篇文章发布已经一年了，但我找到了一个我喜欢的解决方案。要点是在 IE7 的 CSS 中使用“表达式”标签，仅将浮动元素移动为 DOM 中父元素的第一个元素。对于所有其他浏览器，它在语义上是正确的，但对于 IE7，我们修改 DOM 以移动浮动元素。

就我而言，我有：

<div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

在我的 CSS for pull-right 中，我使用：

.pull-right 
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";

结果是 IE7 将我的 <small> 移动到 <div> 的第一个元素，但所有其他浏览器都保留了标记。

这可能不适用于所有人。从技术上讲，它正在修改标记，但仅限于 IE7 的 DOM，它也是一种 javascript 解决方案。

另外，我知道表达式可能存在一些性能问题（它很慢），所以可能有很多这样的浮点数并不理想。就我而言，它运行良好，让我能够保持语义正确的 HTML。