8

我不断发现自己在 IE7 中浮动的元素存在问题。

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

我的意思是我想看到不改变 HTML 的答案。例如：

  • 先放浮动元素
  • 在浮动元素之后添加一个 'clear: both' div。

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

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

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

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

非常感谢！

编辑

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

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

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

4

5 回答 5

23

介绍

你的标题表明希望看到解决float: rightdrop bug 的愿望，但你的文字暗示了一些更广泛的希望看到“在 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 对于防止类型的边距和填充错误、一种 peek-a-boo 错误以及允许overflow清除很重要。对于一系列浮动，如果padding希望容器正常工作，可能需要更改一些 html。

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

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

参考：

浮动孩子的 CSS

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

绝对容器

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

浮动也是一个清算元素

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

参考：

浮动前容器子元素的 CSS

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

浮动后容器子元素的 CSS

清晰的元素

对于设置后的元素，如果它有and，请确保它也有布局以避免加倍; 这也可以防止容器上方的额外空间，并避免其他问题。floatclearpadding background-colorpaddingclearpaddingmargin

参考：

清晰元素之前的段落

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

参考：

结论

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

于 2012-07-11T16:59:46.253 回答
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>

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

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

于 2012-07-11T11:20:35.823 回答
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 类，理想情况下，它必须应用于具有任何子浮动元素的容器。由于您完全不更改 HTML，因此您可以：

  1. .cf用你自己的 div 的选择器替换所有出现的[or]
  2. 使用 JS 应用类（这很糟糕，因为用户会在页面完全加载前几秒钟看到一个损坏的布局）[或]
  3. 使用 PHP ob_start()+ regex 应用类 [或]
  4. 只需复古并使用表格重写所有内容（就像我们在 90 年代所做的那样）
于 2012-07-11T11:47:53.573 回答
0

这很简单：

在你有的地方float:right，添加*clear:left。或者你有的地方float:left，添加*clear:right。

*对于 IE7-

或用于验证 *+html .class{clear:left/right}

于 2012-07-14T11:30:02.650 回答
0

我知道这已经发布一年了，但我找到了一个我喜欢的解决方案。要点是在 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 将 my 移动<small>为第一个元素，<div>但所有其他浏览器都将标记单独保留。

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

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

于 2013-07-12T17:44:42.607 回答