IE6,IE7下text-indent消失问题
来源:互联网 发布:沙滩鞋淘宝 编辑:程序博客网 时间:2024/06/05 17:30
实际应用中,考虑seo的情况下,很多button,icon都要用到inline-block和text-indent来处理
例如:
HTML:<a href="#" class="btn">Button</a>
CSS: .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}
如果这样写的话,在IE6&IE7下,会触发A标签会消失的BUG。
解决方法一:
display:inline-block;改为display:block;然后再做布局处理
解决方法二:
text-indent:-9999px;改为font-size:0; line-height:0;或者各种可以隐藏掉内容元素的方法。
解决方法三:
<a href="#" class="btn">Button</a>
在按钮前面增加任何元素,都可以让消失的按钮重新出现。
解决方法四:
给元素加 position:absolute;
inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素,也就出现了上文中的结果。
造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。考察元素的默认样式,可知:input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意。
例如:
HTML:<a href="#" class="btn">Button</a>
CSS: .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}
如果这样写的话,在IE6&IE7下,会触发A标签会消失的BUG。
解决方法一:
display:inline-block;改为display:block;然后再做布局处理
解决方法二:
text-indent:-9999px;改为font-size:0; line-height:0;或者各种可以隐藏掉内容元素的方法。
解决方法三:
<a href="#" class="btn">Button</a>
在按钮前面增加任何元素,都可以让消失的按钮重新出现。
解决方法四:
给元素加 position:absolute;
inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素,也就出现了上文中的结果。
造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。考察元素的默认样式,可知:input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意。
0 0
- IE6,IE7下text-indent消失问题
- IE6,IE7下text-indent为负值的时候 line-block不起作用。
- IE6/IE7中text-indent对input背景的影响
- 当inline-block和text-indent遇到IE6,IE7
- ie6下text-indent带来的一个bug
- text-indent在ie6下input发生位移
- IE6 IE7 下 checkbox 选中 问题
- IE6,IE7下设置透明度opacity问题
- ie6,ie7的问题
- ie7下div的竖立滚动条消失问题
- IE6与IE7 8下iframe滚动条问题
- 解决margin-bottom 在IE7、IE6下,失效问题
- IE6,IE7下 float:right 后换行的问题
- ietester下ie6 ie7停止工作问题的修复
- 解决IE6-IE7下li上下间距问题
- ie6 bug之设置text-indent后看不到背景图
- ie6、ie7下overflow失效
- text-indent
- 程序员该怎么面试
- Android开发者应该知道的Android体系架构和开发库
- Intent的几种意图
- 按后退键退出到主界面
- 动态规划-jobdu-1547:出入栈
- IE6,IE7下text-indent消失问题
- 打开Eclipse时出现 "Failed to create the Java Virtual Machine
- 生活随笔与读书笔记20140302
- 将HDFS中的数据导入HBase
- 杭电 1002
- Vijos P1763 Wormhole
- c# AntiSocialRobots 源码分析
- iOS多线程之NSThread
- Eclipse搭建安卓-android开发环境