当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 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

Java开发GUI之绝对布局 原

    前面多篇博客介绍了Java的awt包中的布局管理类,当然也可以不使用任何布局管理类,开发者可以直接设置组件的坐标和尺寸,示例代码如下:

722
来自专栏coding

vue基础指令

842
来自专栏理论坞

【教程】C4D文字线立体体现

742
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

1717
来自专栏hbbliyong

WPF模板

先来个模板: <ControlTemplate x:Key="button" TargetType="Button"> <Border ...

3194
来自专栏Youngxj

hislider自适应幻灯片焦点图-emlog插件

1124
来自专栏WOLFRAM

show函数组合多个图形在同一个坐标系下

782
来自专栏python3

tkinter -- Event(1)

分别测试鼠标的 Relase 事件,只有当鼠标被 Relase 后移动才回产生 Relase 事件

361
来自专栏我分享我快乐

jquery中使用event.stopPropagation()阻止事件冒泡

案例如上图:点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下: ...

37613
来自专栏刘望舒

Android View体系(十)自定义组合控件

相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属...

2099

扫码关注云+社区