ie6下display:inline-block为何会失效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-02 17:02:08　-　阅:　-　评:0　-　积分:0

display:inline-block是一个前端代码中常用到的属性，但在ie6下display:inline-block却时常失效，困扰了很多人，曾经也困扰了我。下面以本站为例来给正在被困扰以及即将被困扰的朋友们揭开display:inline-block神秘的面纱。

如图所示，本站的导航标签下面的那道蓝色的线之前是用display:inline-block来实现的。源码如下:

在线演示<!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>ie6下display:inline-block为何会失效</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0;padding:0;}
.bd2,ul li{border:1px solid #f00}
.h3{width:90%;height:24px;line-height:24px; border-bottom:1px solid #ebebeb;text-align:left;}
.h3 h3{display:inline-block;font-size:14px;border-bottom:1px solid #18b1ff;color:#666;}
</style>
</head>
<body>
<div class="h3"><h3>div css</h3></div>
</body>
</html>

在chrome,ff等浏览器下可以达到预期的效果，但在ie6里面却发现成了这样， display:inline-block
我顿时石化了。这不科学啊，inline-block怎么会变成块对象了？翻阅大量相关文章才知道这是为何。首先h标签是块对象，当块对象在转化为inline-block后在ie６里面依旧以块对象呈现；将h标签换成内联对象span等后，却可以达到预期效果。如下图： display:inline-block

如果不使用内联对象仍旧使用块对象的话，也是可以实现ie6下的兼容的，此时利用强大的浮动即可。源码如下：

在线演示<!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>ie6下display:inline-block为何会失效</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0;padding:0;}
.bd2,ul li{border:1px solid #f00}
.h3{width:90%;height:24px;line-height:24px; border-bottom:1px solid #ebebeb;text-align:left;}
.h3 h3{float:left;font-size:14px;border-bottom:1px solid #18b1ff;color:#666;}
</style>
</head>
<body>
<div class="h3"><h3>div css</h3></div>
</body>
</html>

效果图:
float:left

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-02/64.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！