美文网首页
IE8 empty div click not working

IE8 empty div click not working

作者: ilaoke | 来源:发表于2016-01-25 15:35 被阅读105次

http://css-discuss.incutio.com/wiki/Internet_Explorer_Win_Bugs

页面有个空的DIV:

<td>
    <div class="iconDivGT w30">
        <input name="companyCode" type="text" />
        <div class="comIcon" onclick="alert(123);"></div>
        <input name="companyId" type="hidden" />
    </div>
</td>

其样式是这样的:

.comIcon{ 
    float:right; 
    width:16px; 
    height:16px; 
    background:url(../images/Icon.png) no-repeat -2px -152px; 
    margin:1px; 
    cursor:pointer;
}

问题:

在IE8下,点击空DIV无法触发其onclick事件,并且cursor也没变成手形。

后来发现,IE8有empty div bug,如果你GoogleIE8 empty div,会发现各种问题,但提供的解决方案都没有解决我碰到的问题。

解决方法:

IE8即然空DIV有问题,那就不让他为空,添加几个空白,问题解决!

<div class="comIcon" onclick="alert(123);">&nbsp;&nbsp;</div>

上面的做法是workaround,根本原因是页面的父DIV缺少结束标签,导致整个页面float了,导致某些空DIV无法点击了。

相关文章