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;”这个样式!              


阿里巴巴-钉钉-开放平台,能力开放&开发者运营岗位招聘中, 期待你的加入!
钉钉开放,让应用开发更简单
充分开放,是钉钉的重要方向!除致力于为开发者打造丰富的开放API, 更易接入的场景化能力包, 完备的应用开发工具之外, 还需要持续构建开放能力的布道、开发者生态运营体系,包括培训、沙龙、大会、社区合作等等。业务在快速发展,我们也还需要更多优秀的小伙伴加入!

评论区域

line