今天小编跟大家讲解下有关如何解决IE6/IE7不识别display:inline-block属性 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何解决IE6/IE7不识别display:inline-block属性 的相关资料，希望小伙伴们看了有所帮助。
ie6 ie7的haslayout属性是个让人头疼的问题。在做导航条的时候 一般会用到ul li结构 大多数时候我们是把li设置为浮动 让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果 但是问题是inline元素的特性：默认无法设置宽度 高度 以及上下margin （关于padding 情况有点特殊 在ie6 7中 inline元素是无法设置上下padding的 但是在标准浏览器里面是可以设置上下padding的）。 鉴于inline元素的这种特性 如果我们不浮动并且想让li显示在一行 而且可以设置高度 宽度以及上下margin 上下padding等属性 应该怎么办呢 你一定会想到一个属性display:inline-block;对！”inline- block”就是干这个事的 让一个元素既不换行又具有block元素的特性。不过有点小问题. 在IE6、IE7中不识别display:inline-block属性 加不加display:inline-block;对于它们完全没有任何影响。那么让我们来想办法解决这个问题 这就涉及到ie6 7中的haslayout属性了。ie6 7中的inline元素有个特殊的情况 就是触发了ie的hasLayout属性以后就拥有了layout。此时inline元素的表现和标准浏览器里面的inline-block元素基本相同。 看下面这个例子 我们用ie的私有属性zoom来触发hasLayout 然后看看inline元素的表现。 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>display-block</title> <style> span { width:200px; height:50px; margin:10px; padding:20px; background:#ccc; zoom:1; </style> </head> <body> <span><span style="font-family:宋体,微软雅黑,Verdana,Helvetica">span</span> </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"></body> </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"></html></span> 可以看到在ie6 7中inline元素span已经表现得和一个display:inline-block元素一摸一样了 但是在标准浏览器中span仍然是行内元素（宽高以及上下margin都无效）。 如果声明了不正确DTD 导致ie6在quirks 模式下解析 那么ie6会自动触发inline元素的haslayout 不过这里只讨论正常情况下的解析 所以加了个zoom:1来触发haslayout;zoom的值设置为除了auto外的任何值都会触发haslayout 之所以经常用zoom:1;是因为zoom这个属性本身是ie的缩放属性 设置为其他值会导致元素在ie下变形 设置为1既是保持原形不缩放。 了解了上面的情况 我们就可以来解决之前那个问题了。可以改原先的css代码如下： 复制代码代码如下: li <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">{</span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">display:inline-block; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">*display:inline; zoom:1; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">width:80px; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">height:20px; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">margin:10px; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">padding:10px; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">text-align:center; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">background:#cfc; </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica">}</span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"> 让标准浏览器识别display:inline-block;让ie6 7识别display:inline;来覆盖上面的display:inline-block;（我为什么要说”覆盖” ）。然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。</span> </span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"><html xmlns=”http://www.w3.org/1999/xhtml”> </pre><pre name="code"class="html"><head> </pre><pre name="code"class="html"><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> </pre><pre name="code"class="html"><title>display-block</title> </pre><pre name="code"class="html"><style> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">ul {</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">background:#ccc;</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">padding:0;</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">margin:0;</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">list-style:none;</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">} </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">li {</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">display:inline-block; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">*display:inline; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">zoom:1; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">width:80px; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">height:20px; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">margin:10px; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">padding:10px; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">text-align:center; </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html">background:#cfc;</pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"> } </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"></style> </pre><pre name="code"class="html"></head> </pre><pre name="code"class="html"><body> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"><ul> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"><li>测试</li> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"><li>测试</li> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"><li>测试</li> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"><li>测试</li> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"></ul> </pre> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code"class="html"></body> </pre><pre name="code"class="html"></html></pre><span style="color:rgb(17,17,17); font-family:宋体,微软雅黑,Verdana,Helvetica; font-size:14px; line-height:25px">可以看到 现在在各浏览器里面的显示已经一致了。li元素都显示在同一行。</span> <span style="font-family:宋体,微软雅黑,Verdana,Helvetica"><a target="_blank"href="http://www.poluoluo.com/jzxy/201206/167493.html">http://www.poluoluo.com/jzxy/201206/167493.html</a> </span>来源：爱蒂网
