IE CSS Bug系列:浮动复制最后一个字符bug

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。

这篇由伯乐在线前端开发小组的@rubyisapm 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

 

受影响版本

该BUG影响:IE7、IE6

Bug现象

被浮动元素的最后一个元素被复制现象

教程日期

2009.8.18 11:31:50 星期二

描述

这是我在 Gérard Talbot 的 IE7 Bug 页面上发现的一个bug。说实在的,我忍不住对这这个bug傻笑。在 IE6 和 IE7 中,会复制最后一个字符。让我们来看看演示:

演示

该演示在一个单独页面

HTML代码:

CSS代码:

设置如下:演示中有一个div元素,有明确的width设置,在这个div中,有一个元素P——此元素有margin-right属性且该值不为0(在IE6中margin不是必需的),且在该P元素内部有三个浮动的子元素,且这三个子元素的width值比外层元素div的width大。我们来看一下在受影响的浏览器中出现了什么情况:最后一个字符“C”——被复制并重新显示在下一行。我已经强调过这里是有三个浮动元素,目前情况就是:如果有少于三个的浮动元素,此bug不会发生,而如果浮动元素数目多于三个,连续浮动元素bug就出现了。

 

解决方案

下面是针对此bug的解决方案

解决日期

2009 8.18 11:32:52 星期二

修复版本

所有受影响的IE

描述

注意:此方案也适用于针对浮动元素bug的CS解决方案

 

我们要用IE的bug修复利器去修正该bug。不!我不是在说“layout”,虽然可以通过设置P元素的layout以便IE7下修正该bug(IE6不适用)。来看看现在的页面:

 

修正后的页面:在单独的页面打开

HTML代码:

CSS代码:

唯一的区别是:我们在浮动元素span上加了position:relative这个属性,字符C就不会再IE6和IE7中出现”复制”的现象了。

收藏 2 评论

关于作者:rubyisapm

前端程序媛…(新浪微博:@rubyisapm) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部