IE6浏览器的bug问题及相关解决的方法

IE6浏览器的bug问题及相关解决的方法

1、css浮动边距加倍错误（双倍边距BUG）的解决办法   该错误只影响ie而不影响其他浏览器，我们可以考虑用hack来解决！！！   解决方法：_display:inline; 

2、扩展框问题  原因：无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。解决方法：overflow: hidden

3、png图片的问题，   IE6一下版本不支持png图片的格式；

4、三像素文本慢移   Ie6里面的banner部分折成三行，  解决方法：在IE6中让最后一个盒子减少三个像素，这就需要用到!important这个关键字了（让其它盒子也可以，那个方便就设那个）或者：zoom：1；

5.在IE6里，浮动元素的子元素如果定义了高度，则其子元素的宽度是其上一个不浮动的祖先元素的100%，

解决方法：一是不给其子元素设固定高度（只设行高），二是也让这个子元素变成浮动元素。

7、一个空格引发CSS失效 这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符"-"。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符"-"，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

8、超链接访问过后hover样式就不出现的问题   被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A a:link {color: #1f3a87; text-decoration:none;} a:visited{color: #83006f;text-decoration:none;} a:hover {color: #bc2931;text-decoration:underline;} a:active {color: #bc2931;}

9、IE6的双倍边距BUG  浮动后本来外边距10px,但IE解释为20px,

解决办法是加上display:inline

10、IE6下这两个层中间怎么有间隙 这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

12、IE6中奇数宽高的BUG  IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

13、IE6下为什么图片下方有空隙产生 解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block 或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom 还可以设置父容器的字体大小为零，font-size:0

14、IE6下DIV高度显示的Bug   IE6下默认的字体尺寸大致在12 - 14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层。  

要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。比如 <div style="height: 6px; font: 0pxArial;"></div> 或者 <div style="height: 6px; overflow:hidden;"></div> 都可以阻止 IE 的自作聪明。 

  该问题在 IE7 / Firefox /Opera 下均不存在。

 

转载于:https://www.cnblogs.com/lhxsoft/p/8423272.html