置换元素在IE浏览器中的疑难杂症
发布时间：2018-09-06 16:09:30 所属栏目：经验 来源：站长网
导读：置换元素在 IE 浏览器中有不少问题，比方说置换元素的行高就是其中难题之一，当然还有 form 元素 textarea 的边距继承 bug，OK，今天再介绍几个，凑满一箩筐。 置换元素与A标签 场景： IE6，A标签内的图片（置换元素），默认隐藏，hover显示 html： a href=
|
置换元素在 IE 浏览器中有不少问题，比方说置换元素的行高就是其中难题之一，当然还有 form 元素 textarea 的边距继承 bug，OK，今天再介绍几个，凑满一箩筐。 置换元素与A标签 场景： IE6，A标签内的图片（置换元素），默认隐藏，hover显示 html： <a href="#"> <img src="" /> </a> CSS a img{display:none}/*使用visibility也行*/ a:hover img{display:block;} 现象： ie6,hover后无法正常显示 a 标签内的图片 解决方法： hover 时触发 a 标签的 hasLayout a:hover{ _zoom:1; } 使用 JS 脚本添加 class Demo：demo1 置换元素与position 在前面的基础上给 img 加上容器，设置position，默认隐藏，hover 显示 html: <a href="#"> <span> <img src="" /> </span> </a> css: a{position:relative} a span{position:absolute;display:none;} a:hover span{display:block;} 现象： ie6,hover后无法正常显示 a 标签内的图片，触发其 hasLayout 可以显示，但无法再次隐藏 Demo：demo2 解决方法： 使用visibility代替display 清除span元素的position 使用脚本 一个更极端的例子：The IE ‘non-disappearing content’ bug 图片与hasLayout 同样的例子，如果 img 的容器 span 元素被触发 hasLayout 则会导致 a 链接在 IE6/7 浏览器下失效（图片区域） html: <a href="#"> <span> <img src="" /> </span> </a> css a span{display:inline-block}/*float,absolute,zoom都行*/ 现象: 图片区域链接无效 Demo：demo3 解决方法： 还原span容器的hasLayout 尽量不要采用此类布局 （编辑：海南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
