IE6、7 不支持display:inline-block的问题

经常遇到此类问题，解决的办法从来都是网上找css解决方案，拷贝粘贴，能用就行，从未细想。

今天整理出来。

先看两段结构：

<!--内联元素 -->
    <div class="menu_1">
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        
    </div>
    
    <!--块元素-->
    <div class="menu_2">
        <p>块元1素</p>
        <p>块元素100</p>
        <p>块元素</p>
        <p>块元素</p>
        <p>块元素1000</p>
        <p>块元素</p>
        <p>块元素</p>
    </div>

问题来了：要产生display：inline-block的 元素，可能是内联元素，也可能是块元素。

1，内联元素。应用样式：

.menu_1{ height:30px; background:#ffc; width:380px;}
.menu_1 a{ background:#0CF; margin-left:10px; display:inline-block;}

IE6,7 都可以正常显示display：inline-block效果。  

所以，如果是内联元素，解决方法：直接加 display:inline-block;

 

 

2，块元素。应用样式：

.menu_2{ width:430px; height:30px; background:#ccc;}
.menu_2 p{ background:#f00; margin-left:5px; display:inline-block; _zoom:1;}
.menu_2 p{*display:inline;}

IE6,7 都可以正常显示display：inline-block效果。 

所以，如果是块元素，解决方法：

先给元素加   display:inline-block; _zoom:1;  

再给元素加   *display:inline;

【注意：】要写两个display，且两个不能写在一个括号里，这是IE的一个bug.

 

附完整代码，供测试用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dispaly：inline-block</title>
<style type="text/css">
    .menu_1{ height:30px; background:#ffc; width:380px;}
    .menu_1 a{ background:#0CF; margin-left:10px;}
    

    .menu_2{ width:430px; height:30px; background:#ccc;}
    .menu_2 p{ background:#f00; margin-left:5px; display:inline-block; _zoom:1;}
    .menu_2 p{*display:inline;}
</style>
</head>

<body>
    <!--内联元素 -->
    <div class="menu_1">
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        <a href="#">内联元素</a>
        
    </div>
    
    <!--块元素-->
    <div class="menu_2">
        <p>块元1素</p>
        <p>块元素100</p>
        <p>块元素</p>
        <p>块元素</p>
        <p>块元素1000</p>
        <p>块元素</p>
        <p>块元素</p>
    </div>
</body>
</html>

 

 

posted on 2014-03-19 11:21  什么嘉  阅读(163)  评论(0)  编辑  收藏  举报

导航