+ -
当前位置:首页 → 问答吧 → 发生BUG场合及解决方法

发生BUG场合及解决方法

时间:2011-06-21

来源:互联网

我是一个新手,每次写HTML,都花了不少时间在测试兼容里。也遇到了很多问题。所以想不断学习更好的方法去解决问题。 收集了一些高手的。听说IE6有上百个BUG,所以想全收集起来去解决!
尽管IE6浏览器有着这样那样的问题,但是微软依然在为IE6提供各种支持,并且短时间内不会降低对它的支持力度。因为微软已经将IE6的支持延长到2014年,比原定时间又增加了4年。
所以今天还要讨论IE6,学习学习经验,大家一起讨论一下!以下是我收集的一些BUG,也检验过了!主要是知道:发生场合,解决方法,原理分析。
还有哪些,大家知道的给说说,不胜感激

IE6中双边距Bug:
发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。
解决方法:是给浮动元素加上display:inline;CSS属性;或者用padding-left代替margin-left。
原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而之后对象是相对第一个对象的,所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug,首先是 inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素 haslayout,会让inline元素表现得跟inline-block元素的特性一样,支持高宽,垂直margin和padding等,所以div class的所有样式可以用在这个display inline的元素上。

IE6中浮动元素3px间隔Bug:
发生场合:发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。
解决方法:右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。
原理分析:IE6浏览器缺陷Bug。

IE6/7负margin隐藏Bug:
发生场合:当给一个有hasLayout的父元素内的非hasLayout元素设置负marin时,超出父元素部分不可见。
解决方法:去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
原理分析:iE6/7独有的hasLayout产生问题。

IE6/7下ul/ol标记消失bug:
发生场合:当ul/ol触发了haslayout并且是在ul/ol上写margin-left,前面默认的ul/ol标记会消失。
解决方法:给li设置margin-left,而不是给ul/ol设置margin-left。
原理分析:IE6/7浏览器Bug

IE6/7下margin与absolute元素重叠bug:
发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。
原理分析:这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

IE6/7/8下auto margin居中bug:
发生场合:给block元素设置margin auto无法居中
解决方法:出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决,但根据本人亲测,加 with此种方法是无效的,如果没有Doctype即使给元素添加width也无法让block元素居中。
原理分析:缺少Doctype声明。

IE6、IE7插入图片下方有空隙产生Bug:
发生场合:默认的。
解决方法:img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零,font-size:0
原理分析:IE6浏览器缺陷Bug。

作者: li9269391   发布时间: 2011-06-21

好,收藏了。。。。

作者: my5icool   发布时间: 2011-06-21