不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
IE6对haslayout处理的bug 进入全屏
line

在IE6下,对haslayout的处理,存在一个非常诡异的bug,直接导致浏览器崩溃!


代码片段1:

<a href="#">aaaa</a>

现象:鼠标滑过时不影响<a>标签的haslayout属性。正常


代码片段2:

<style type="text/css">
    a:hover{zoom:1;}
</style>
    
<a href="#">aaaa</a>

现象:鼠标滑过时触发<a>标签的haslayout属性。正常


代码片段3:

<a style="position:absolute;" href="#">aaaa</a>

现象:鼠标滑过时不影响<a>标签的haslayout属性。正常


代码片段4:

<style type="text/css">
    a:hover{zoom:1;}
</style>
    
<a style="position:absolute;" href="#">aaaa</a>

现象:鼠标滑过时触发<a>标签的haslayout属性。正常


代码片段5:

<a style="position:relative;" href="#">aaaa</a>

现象:鼠标滑过时不影响<a>标签的haslayout属性。正常


代码片段6:

<style type="text/css">
    a:hover{zoom:1;}
</style>
    
<a style="position:relative;" href="#">aaaa</a>

现象:鼠标滑过时触发<a>标签的haslayout属性。浏览器崩溃


   结论:对于一个“inline”级别(默认haslayout=-1)的标签,设置了其position为relative,

   并且没有通过css触发其haslayout(可通过width、height、zoom等触发);

   此时,如果试图通过<style type="text/css">a:hover{zoom:1;}</style>这样的形式

   去触发其haslayout,就会造成页面崩溃!


   最保险的办法:给position为relative的inline标签,加上“zoom:1;”这个样式!              


趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line