方法一
.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*/
例子
<!DOCTYPE html>
<html lang="gb2312">
<head>
<meta charset="gb2312" />
<title>example</title>
<style>
#example li {display:inline-block;}/* 在这里设置的inline-block属性在ie6 7下无效，仅仅是触发了ie的layout*/
#example li {*display:inline;}/* 解决办法：针对ie6 7添加inline属性，使之呈现为内联元素 */
</style>
</head>
<body>
<div id="example">
<ul>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
下面给出具体例子：
css代码
?
.head{
width:106px;
padding:20px;
margin:0 auto;
border:1px solid #000;
}
.logo{
background:url(images/logo.jpg) no-repeat;
width:106px;
height:42px;
display:inline-block;
text-indent:-999em;
overflow:hidden;
direction:ltr;
}
html结构
<div class="head"><a class="logo" href="#">logo</a></div>
firefox下截图 ie6下截图，图片消失不见了
修改过的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下截图