首页 > 代码库 > 浏览器兼容性问题汇总

浏览器兼容性问题汇总

浏览器兼容问题

 

第一,IE6,不支持高度小于12px的盒子,任何小于12px的盒子,在IE6中看都大

解决办法很简单,就是将盒子的字号设置小(小于盒子的高),比如0px。

1          height: 4px;

         _font-size: 0px;

 

我们现在介绍一下浏览器hack。hack就是“黑客”,就是使用浏览器提供的后门,针对某一种浏览器做兼容。

IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性

比如:

1          _background-color: green;

 技术分享

 

 

解决微型盒子,正确写法:

1          height: 10px;

2          _font-size:0;

 

第二,IE6不支持用overflow:hidden;来清除浮动的

解决办法,以毒攻毒。追加一条

1          _zoom:1;

 

完整写法:

1          overflow: hidden;

2          _zoom:1;

实际上,_zoom:1;能够触发浏览器hasLayout机制。这个机制,不要深究了,因为就IE6有。我们只需要让IE6好用,具体的实现机制,有兴趣的同学,自行百度。

 

强调一点, overflow:hidden;的本意,就是溢出盒子的border的东西隐藏,这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

 

我们刚才学习了两个IE6的兼容问题,这两个IE6的兼容问题,都是通过多写一条hack来解决的。

这个我们称为伴生属性。

1          height:6px;

2          _font-size:0;

 

1          overflow:hidden;

2          _zoom:1;

 

关于margin的IE6兼容问题

一. IE6双倍margin bug

当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。

1           <ul>

2           <li></li>

3           <li></li>

4           <li></li>

5           </ul>

 技术分享

 

 

解决方案:

1)使浮动的方向和margin的方向,相反。

所以,你就会发现,我们特别喜欢,浮动的方向和margin的方向相反。并且,前端开发工程师,把这个当做习惯了。

1           float: left;

2           margin-right: 40px;

 

2)使用hack(没必要,别惯着这个IE6)

单独给队首的元素,写一个一半的margin

1          <li class="no1"></li>

 

1          ul li.no1{

2           _margin-left:20px;

3          }

 


二. IE6的3px bug

 技术分享

 

解决办法:

不用管,因为根本就不允许用儿子踹父亲。所以,如果你出现了3px bug,说明你的代码不标准(要对父元素使用padding-right)

 

IE6,千万不要跟他死坑、较劲,它不配。 格调要高,老师给你讲,就是为了增加面试的成功率。不是为了让你成为IE6的专家。

浏览器兼容性问题汇总