当inline-block和text-indent遇到IE6,IE7
2024-09-06 12:59:33
在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如:
<a href="#" class="btn">Button</a>
css我习惯写成这样
.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}
在标准浏览器下是没问题的,但是在IE6和7下会触发A标签消失的bug。
解决方法1:
display:inline-block;
改为
display:block;
然后再做布局处理。
解决方法2:
text-indent:-9999px;
改为
font-size:; line-height:;
或者各种可以隐藏掉内容元素的方法。
解决方法3:
<a href="#" class="btn">Button</a>
在按钮前面增加任何元素,都可以让消失的按钮重新出现。
解决方法4:
给元素加 position:absolute;
PS: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,所以在布局时应加以注意…
最新文章
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
- 漫谈C++11 Thread库之原子操作
- JXL操作Excel
- hdu 4523 威威猫系列故事——过生日 小模拟
- java中使用URLClassLoader访问外部jar包的java类
- Scope and Namespace
- 如何在eclipse中添加ADT
- 【Unity 3D 游戏开发】Unity3D 入门 - 工作区域介绍 与 入门示例
- Mongodb数据库操作
- BEM的命名规则
- Redis深入学习笔记(五)Redis阻塞原因
- java子类继承关系
- VMware: Non-VI workload detected on the datastore
- offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
- hdu2064
- 数据结构与算法 —— 链表linked list(06)
- python 与 mongodb的交互
- php之快速入门学习-18(PHP 面向对象)
- 关于js中定时器的返回值问题
- 解决servlet在web.xml中的路径跳转问题