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

 

方法一

.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*/

例子

 

    

下面给出具体例子：
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下截图，图片消失不见了

word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-">          

修改过的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下截图