IE8 empty div click not working

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无法点击了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • Ø JavaScript 3 HTML对象获取问题 3 const问题 3 event.x与event.y问题 3...
    DavieKong阅读 3,328评论 0 1
  • 浏览器兼容性问题大汇总Ø JavaScript HTML对象获取问题 const问题 event.x与event....
    凤凰跑跑阅读 5,244评论 0 10
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,990评论 0 1
  • 【这是“心灵.写作”小组的第九篇文章】 今年早上一件小事,让我又自我教练了一把。简直赋能就在一瞬间啊! 老师教得理...
    逐鹿儿阅读 4,547评论 2 2