修复IE下使用CSS属性溢出的bug

我们想建立一个HTML文件进行测试，下面是复制代码的关键代码片段如下： div precode A href=' http://creativecommons.org/licenses/by-NC-sa/2.5/cn/'rel='许可证'遵守我的版权/A href=' http://creativecommons.org/The licenses/by-NC-sa/2.5/cn/' Rel=' license '遵守我的版权/A href=' http://creativecommons.org/licenses/by-NC-sa/2.5/cn/'rel=' license '遵守我的版权/A href=' http://creativecommons.org/licenses/by-NC-sa/2.5/cn/'rel=' license '遵守我的版权/A href=' http://creativecommons.org/licenses/by-NC-sa/2.5/cn/Rel=' license '遵守我的} pre { overflow:auto背景-color : # fff 0 F5；余量margin:1.6em0划水：01.6 em；}以上代码在Firefox中的显示可以预期。但是在IE6中，没有溢出效果可以表现出图1 中IE 6下的效果。

然而，IE7中的显示有些不同，有一个烦人的右滚动条。

IE6的bug可以通过给包含块增加宽度来解决，即复制代码如下：pre { overflow:auto背景-color : # fff 0 F5；余量margin:1.6em0划水：01.6 em；宽度：90%；}此时，IE6的滚动条出来了，但和IE7一样，右侧多了一个滚动条。增加一个右滚动条的原因是IE总是在一个元素的总高度里面加上底部滚动条，使得元素的一部分高度被底部滚动条占据，无法完全显示，所以IE自动增加了右滚动条，这样滚动后也能看到元素被遮挡的内容。最后，为了去掉IE右侧的滚动条，我们在containingblock中添加了如下CSS复制代码：pre { overflow:auto背景-color : # fff 0 F5；余量margin:1.6em0划水：01.6 em；宽度：90%；溢出-y :隐藏；}这样，我们在IE中创建了与Firefox、Opera和Safari相同的overflow:auto效果。实际上，这种效果可以应用于所有固定格式的元素(通常是pre元素)，最常见的是代码块。