IE6下常见的几个CSS兼容问题
本文由发表于7年前 | CSS+DIV | 评论数 1 |  被围观 6,223 views+

IE6浮动产生双边距的问题:

在IE6下面,有浮动时,margin-right:出现了两倍的边距。这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

解决办法很简单,就是在外部容器的CSS加入 display:inline 属性。

IE6下的marginpadding的问题:

IE6里面的div会挤压外面的div:造成各个浏览器宽度不同是由于IE6使用margin或padding会挤压div的宽度,导致宽度变长造成的,而IE7,IE8不会。无论是IE7还是IE8使用padding都会往外挤,只是IE6不够位置了会挤压到变形,而其他浏览器不够位置则会各个模块的空间重叠在一起。

margin与padding的区别:

margin挤压别的容器,别的容器不一定会被挤压扩大
padding挤压自身,自身肯定会被挤压扩大
使用margin和padding调节宽度的注意事项,注意在IE6,IE7,IE8中测试;

注释bug3像素bug):

IE6出现重复字符的bug(注释bug、3pixbug)

一个容器包含2两个具有“float”样式的子容器。
第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”)
在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。

为何会出现重复文字

bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,是只是现在网上认可度比较高的而已——

IE6浏览器对<!-- -->注释的解释存在bug引起的。

“3像素bug”的扩展后遗症。(“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到)
其他的一些说法

如何消灭重复文字

引起的原因,也许我们可以不知道,但是如何去消除却是我们一定要关注的。
“歌剧院魅影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”,如果要修正bug,只要让任何一个条件不满足即可——

改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
——此解决方案的评论:疯了!因噎废食的做法。
减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。
去掉所有的注释。
——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。
修正注释的写法。将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->
——此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!--[if !IE]>这里是注释内容[endif]-->这种注释写法很欣赏。
在第二个容器后面加一个或者多个<div style="clear"></div>来解决。
——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。

 

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/several-under-the-common-css-ie6-compatibility.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 4/10
文章评论
    一条评论
  1. 杭州旅游攻略网 2012年05月30日13:33:37  #-49楼 回复 回复

    收集起来日后查看。非常感谢楼主。

给我留言

有人回复时邮件通知我
CSS+DIV的相关文章
随机文章 本月热门 热评
1 Java Web笔记 – Servlet多线程同步问题及其解决方法 2011/11/10
2 Java基础笔记 – hashCode()与equals()方法的介绍和使用场合 2011/10/11
3 Java基础笔记 – 增强的for循环For each循环 自动装箱拆箱 可变参数 2011/10/30
4 Java虚拟机笔记 – JVM 自定义的类加载器的实现和使用 2011/11/5
5 JVM笔记 – 自动内存管理机制(Java内存区域与内存溢出异常) 2014/11/11
6 软件工程需求分析-ER图 状态转换图 2011/7/1
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.