[译]CSS技巧:如何避免IE6中的"浮动下坠"

原文：http://www.yuiblog.com/?p=2820

译文：https://www.ofcss.com/2010/10/31/prevent-a-float-drop-in-ie6-translation.html

作者：Thierry Koblentz

尽管这种情况通常被称为”浮动下坠“或者”浮动下沉”,但实际上下坠或下沉的列并不一定是浮动的……只要它比预留给它的空间更宽就有可能出现下沉。请记住这是一种特定情况下才会发生的在跨浏览器时很常见的行为——网页的某一栏太宽了，于是它下沉了。

IE 6的问题之所以突出，是因为它对 width 这个属性的支持不完整（height 也好不到哪里去）。因此，IE 6会让容器扩展以适应内容。而为这个容器设计的宽度却没法随之变宽，于是IE 6对容器宽度的自动扩展就造成了它的下沉。

通常情况下，罪魁祸首是那些无法包围的元素（比如图片、url等），但是文字样式（例如 IE 和 斜体）也有可能造成这种情况。

例如，要让YUIBlog的右栏在IE 6中下沉，我只需要让右栏中的某个图片的宽度大于210px。这张图将会强迫IE 6增加右栏的宽度，这样右栏就无法再保持在左栏旁边了。

column-drop

常见修复方法：

  • word-wrap: break-word;//强制文字截断（译注：主要针对非双字节语言，把单词强制截断）。
  • wbr with wbr:after {content:"\00200B"}; //针对 Opera，wbr属性代表行截断的机会。在长文字中添加wbr以便在必要时允许浏览器换行。
  • overflow-x:hidden;//隐藏溢出容器的所有内容。

要注意的是前两种方式只适用于文字，不能放置图片撑开容器。

已知会导致修复失败的情况

几周前，我遇到要为yahoo!财经的页面修复“浮动下沉”的bug。在现代浏览器中，一行长文字超出了容器显示在容器右侧外部（查看截图），但是在IE 6下，同样的文字造成了右栏下沉到主栏下方（查看截图）。麻烦的是，这部分内容是由外部提供，因此没办法对HTML代码进行修改。

由于这行文字是一组由逗号分隔的标签列表，因此之前提到的几种修复方法都不能满足需要。在这行文字内部任意位置强行截断当然比隐藏溢出部分要好，但这也不是可行的解决方案。

让IE 6正常显示

要让IE 6像其它现代浏览器一样显示这行文字，方法是给文字的容器的右边距设置一个负值（同时还要设置相对定义position:relative）。

效果演示

没有修正时

demo-1

fix 修正以后

demo-2

代码示例：

.fixMe {
  margin-right:-100px;
  position:relative;
}

负边距可以设置为任意大的值，只要大于实际所需宽度和指定宽度的差值即可。这就是我所说的放置浮动下沉的方法。设置相对定位（position:relative）的目的是让IE能够显示超出了父元素边缘的内容。

Things to consider 补充说明

这个hack能保证每一栏都呆在应该在的位置上，但是无法阻止溢出内容的容器变宽。因此你不能在该容器上应用背景或者边框样式，否则这些样式都会显示到父元素外部。下面有个截图，演示了在IE 6下使用这个方法同时设置边框和背景的效果：

demo-with-background

               

《[译]CSS技巧:如何避免IE6中的"浮动下坠"》上有9条评论

  1. 小李刀刀 文章作者

    adengweb :

    http://www.99css.com/?p=680。
    从涛哥哥的这个链接进去。优盘提示“该文件的共享已到期，您可以提醒分享者续期 ”
    还有就是飞飞哥哥是我看错了。以前看了个电视剧叫小李飞刀。 所以第一感觉就想到了飞飞哥哥。/heihei

    我已经重新在我的博客上发了，你可以下载或在线观看。

  2. adengweb

    http://www.99css.com/?p=680。
    从涛哥哥的这个链接进去。优盘提示“该文件的共享已到期，您可以提醒分享者续期 ”
    还有就是飞飞哥哥是我看错了。以前看了个电视剧叫小李飞刀。 所以第一感觉就想到了飞飞哥哥。/heihei

    1. 小李刀刀 文章作者

      CssGaga的视频，虽然是我做的，不过是涛哥亲自发布的。你可以在这里找到：http://www.99css.com/?p=680。

      另外，为什么是“飞飞哥哥”呢？……

      1. adengweb

        从涛哥哥的那个链接去下载链接说 “该文件的共享已到期，您可以提醒分享者续期” 写错了是小刀哥哥。

    1. 小李刀刀 文章作者

      在文中作者首先已经给出来三种最常见的解决办法，其中第三种就是overflow:hidden。在某些情况下（比如本文中作者所举的例子，强制隐藏并不合适，会造成需要显示的内容不能正常显示。）

      所以作者采用的办法是对于这种非常特殊的情况，允许文字超出容器显示。

评论已关闭。