置换元素在IE赏识器中的疑难杂症
发布时间：2018-09-03 22:28:27 所属栏目：创业 来源：站长网
导读：置换元素在 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 只管不要回收此类机关 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
