当inline-block和text-indent遇到IE6,IE7

在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如:

  1. <a href="#" class="btn">Button</a>

css我习惯写成这样

  1. .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}

在标准浏览器下是没问题的,但是在IE6和7下会触发A标签消失的bug。

解决方法1:

  1. display:inline-block;

改为

  1. display:block;

然后再做布局处理。

解决方法2:

  1. text-indent:-9999px;

改为

  1. font-size:0; line-height:0;

或者各种可以隐藏掉内容元素的方法。

解决方法3:

  1. &nbsp;<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,所以在布局时应加以注意…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

Knockout.Js官网学习(创建自定义绑定)

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可...

864
来自专栏Google Dart

AngularDart Material Design 下拉列表 顶

material-dropdown-select组件结合了material-select和material-button-down的API。

1212
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

这套jQuery教程是老马专门为寒门子弟而录制,希望大家看到后能转发给更多的寒门子弟。视频都是免费,请参考课程地址:https://chuanke.baidu....

2150
来自专栏抠抠空间

jQuery基础

一、jQuery是什么? jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Documen...

29912
来自专栏老马寒门IT

01-老马jQuery教程-jQuery入口函数及选择器

1.什么是jQuery? 1.1 jQuery介绍 jQuery是一个轻型、快速的、小巧的功能丰富的JavaScript类库。本质就是一堆js的函数的组合。对原...

20810
来自专栏柠檬先生

VUE 入门基础(8)

十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

2129
来自专栏从零开始学自动化测试

appium+python自动化26-模拟手势点击坐标(tap)

前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 一、 tap用法 1.tap是...

4094
来自专栏前端学习心得

React三大突出特点

1072
来自专栏抠抠空间

JavaScript之DOM

一、什么是DOM? DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 DOM(Docum...

2795
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

1723

扫码关注云+社区