欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

济南网站建设:IE6/7下不同的inline-block

今天看了stupig博客的博文才知道原来IE6/7对内联元素和块元素的inline-block的解析是不同。如下图:

上面是span的inline-block效果,下面是div的inline-block效果。可以看出div用inline-block IE6/7会把它解析成block来对待(至少看起来是这样)。

下面是我的测试代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6/7下不同的inline-block</title>
<style>
.c{
    width:120px;
    height:100px;
    padding:5px;
    background-color:#00f;
    border-bottom:1px solid #000;
    display:inline-block;
}
</style>
</head>
<body>
<span class="c">
span的inline-block
</span>inline-block
<div class="c">
div的inline-block
</div>inline-block
</body>
</html>

那如果我们真的需要div实现inline-block要怎么办呢?其实只需要在样式上加两句代码就好了。

1
2
3
4
5
6
7
8
9
10
.c{
    width:120px;
    height:100px;
    padding:5px;
    background-color:#00f;
    border-bottom:1px solid #000;
    display:inline-block;
    *display:inline;
    zoom:1;
}


ps:感谢stupig博客这篇博文,不然被坑多少回都不知道了,谢谢~

Demo下载:http://pan.baidu.com/share/link?shareid=102979&uk=3221702211

(编辑:济南网站建设、济南网站建设公司:畅维网络)

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号