3.6浏览器兼容问题

Posted 2021-04-30 向远方小屋

上述知识点遇见的浏览器兼容问题

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

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

height: 4px;

_font-size: 0px;

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

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

_background-color: green;

解决微型盒子，正确写法：

height: 10px;

_font-size:0;

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

解决办法，以毒攻毒。追加一天_zoom:1;

完整写法：

overflow:hidden;

_zoom:1;

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

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

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

这个我们称为伴生属性。

height: 6px;

_font-size:0;

overflow:hidden;

_zoom:1;