清理IE7的'float：right'删除bug的CSS修复

时间：2012-06-11 14:09:44

标签： css internet-explorer internet-explorer-7 css-float

我一直发现自己在IE7中浮现的元素存在问题。

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

我的意思是，我希望看到不要更改HTML 的答案。 E.g：

  • 将浮动元素放在第一位
  • 在浮动元素之后添加'clear：both'div。

据我所知，有时浮动元素不会考虑其父级高度，因此有时无法正确包含它。偶尔我会发现自己'添加布局'到一个带缩放的元素：1有时会修复它。其他时候我发现自己在有条件的IE7样式表中乱搞，这不是我认为最好的解决方案。

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

我还阅读了使用相对和绝对定位（父div和子div）的其他答案。这会把它拉起来，但经常影响周围的div。

如果有人能够深入解释发生这种情况的原因以及对各种修复的详细讨论，我很乐意为这个问题添加一笔赏金，只有理想的CSS！

非常感谢！

修改

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

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

浮动时，右侧通常会下降。理想情况下，这应该是左 - 右 - 主格式，但我不断发现自己的样式开发人员工作（主要是Drupal）在这种情况下，让他们改变他们的工作是太麻烦了。合理？因为我是造型开发人员的工作，所以他们从来没有把明确的块（我个人觉得这很可怕也很脏！）

5 个答案:

答案 0 :(得分：22)

简介

您的标题表示希望看到float: right丢弃错误的修复程序，但您的文本暗示了一些更广泛的范围，希望看到解决方案“IE7中存在元素问题。”存在许多一般性问题。在该浏览器中浮动元素（right或left）。尽管人们可能会质疑IE7浏览器的支持是否值得关注，但对于某些人来说，毫无疑问它将会持续一段时间。因此，我将借此机会立即解决有关该浏览器中浮动的许多问题。请注意，下面的许多实验和参考资料来自一个很好的资源：http://www.brunildo.org/test/index.html。

包含元素的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) */
}

确保hasLayout对于防止边距和填充错误类型，一种偷看错误以及允许overflow清除是非常重要的。对于一系列浮点数，如果希望容器上的padding正常工作，某些html可能需要更改。

对于float: right的一个“丢弃”问题，您可能希望避免在容器上设置明确的height或max-height。 min-height没问题。设置height然后float高于容器会使IE7不符合以下元素。我发现没有纯css解决方案。

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

参考文献：

Floated Child的CSS

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

绝对容器

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

Float也是一个清算元素

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

参考文献：

浮动前容器子元素的CSS

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

浮动后容器子元素的CSS

明确元素

对于设置float的{​​{1}}之后的元素，如果它有clear 和 {{1} }，确保它还具有布局以避免padding加倍;这也可以防止由于容器background-color导致padding以上的额外空间，并避免其他clear问题。

参考文献：

明确元素之前的段落

在浮动元素和清算元素之间设置一个padding且高度比margins更短的段落，可以在margin-bottom和{之间创建一个额外的间隙{1}}等于float。除了给段落提供零底部边距之外，没有已知的纯css修复（如果段落可能比浮点高，则可能无法接受）。

参考：

结论

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

答案 1 :(得分：1)

您是否尝试过使用clearfix解决方案来折叠div？有这方面的变化，有一个较新的版本，但我没有手，但这是标准的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 :(得分：0)

我们多年来一直在使用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类，理想情况下，它必须应用于具有任何子float元素的容器。由于您对完全不更改HTML有限制，您可以：

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

答案 3 :(得分：0)

很简单：

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

IE7的

* -

或者进行验证 *+html .class{clear:left/right}

答案 4 :(得分：0)

我知道自发布以来已经过去了一年，但我找到了一个我喜欢的解决方案。要点是在CSS中为IE7使用'expression'标签，只是将浮动元素移动到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。

相关问题
最新问题