一聚教程网:一个值得你收藏的教程网站

热门教程

解决ie7下display: inline-block失效的BUG

时间:2022-06-25 09:33:05 编辑:袖梨 来源:一聚教程网

 

方法一

.ie7 {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

后来又看到一方法

#id{display:inline-block;}

#id{display:inline;}

注意:一定要分开写,如果写在同一个选择器里是不起作用的,这是IE的一个bug。

在IE下,display:inline-block只是触发了元素的layout。比如将display:inline-block给到div上,只能保证这个div拥有块元素的特征(可以设置宽度和高度),但是还是行布局(产生换行)。接下来要设置display:inline.更改这个div的布局为内联布局(不产生换行)。

附后一方法

IE6下块元素如何实现display:inline-block的效果?

有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/


例子





example


 

    


            

                    
  • 1

  •                 
  • 1

  •             

      



下面给出具体例子:
css代码

?

.head{

padding:20px;
margin:0 auto;
border:1px solid #000;
}
 
.logo{
background:url(images/logo.jpg) no-repeat;


display:inline-block;
text-indent:-999em;
overflow:hidden;
direction:ltr;
}
html结构



firefox下截图                               ie6下截图,图片消失不见了

解决ie7下display: inline-block失效的BUGword-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-">          解决ie7下display: inline-block失效的BUG

修改过的css代码

 代码如下 复制代码

.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:block;/*float:left;*/
text-indent:-999em;
overflow:hidden;
direction:ltr;
}

firefox下截图                               ie6下截图

解决ie7下display: inline-block失效的BUG          解决ie7下display: inline-block失效的BUG

热门栏目