注册登录

【display】如何解决IE6／IE7不识别display：inline-block属性-inline-block

时间:2016-01-22 07:42 来源: 我爱IT技术网作者:佚名

本文所分享的知识点是【如何解决IE6／IE7不识别display：inline-block属性】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。

如何解决IE6／IE7不识别display：inline-block属性

li {
display:inline-block; 
*display:inline; zoom:1; 
width:80px; 
height:20px; 
margin:10px; 
padding:10px; 
text-align:center; 
background:#cfc; 
}
 让标准浏览器识别display:inline-block;让ie6，7识别display:inline;来覆盖上面的display:inline-block;（我为什么要说”覆盖”？）。然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。

<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>
<pre name="code" class="html">ul {</pre>
<pre name="code" class="html">background:#ccc;</pre>
<pre name="code" class="html">padding:0;</pre>
<pre name="code" class="html">margin:0;</pre>
<pre name="code" class="html">list-style:none;</pre>
<pre name="code" class="html">} </pre>
<pre name="code" class="html">li {</pre>
<pre name="code" class="html">display:inline-block; </pre>
<pre name="code" class="html">*display:inline; </pre>
<pre name="code" class="html">zoom:1; </pre>
<pre name="code" class="html">width:80px; </pre>
<pre name="code" class="html">height:20px; </pre>
<pre name="code" class="html">margin:10px; </pre>
<pre name="code" class="html">padding:10px; </pre>
<pre name="code" class="html">text-align:center; </pre>
<pre name="code" class="html">background:#cfc;</pre>
<pre name="code" class="html"> } </pre>
<pre name="code" class="html"></style> </pre><pre name="code" class="html"></head> </pre><pre name="code" class="html"><body> </pre>
<pre name="code" class="html"><ul> </pre>
<pre name="code" class="html"><li>测试</li> </pre>
<pre name="code" class="html"><li>测试</li> </pre>
<pre name="code" class="html"><li>测试</li> </pre>
<pre name="code" class="html"><li>测试</li> </pre>
<pre name="code" class="html"></ul> </pre>
<pre name="code" class="html"></body> </pre><pre name="code" class="html"></html></pre>可以看到，现在在各浏览器里面的显示已经一致了。li元素都显示在同一行。

<a target="_blank" href="http://www.poluoluo.com/jzxy/201206/167493.html">http://www.poluoluo.com/jzxy/201206/167493.html</a>

关于如何解决IE6／IE7不识别display：inline-block属性的相关讨论如下：

　　相关问题：css，如何处理行级标签之间的空格，每次对某些用di...

　　答：第一种办法：你改这么写（最简单的一种）：1234,就是A标签之间不换行不加空格第二种办法：如果你非要换行这种写法：这么改（这种写法，在ie6中还是稍微有点间隙，但是在别浏览器中都正常）： a{display:inline-block;width:27px;height:27px;t... >>详细

　　相关问题：display:inline 和display:inline-block和display:...

　　答：简单讲就是display:inline 转化成内联元素，不换行；display:block转换成块元素，换行；display:inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。 >>详细

　　相关问题：div中的属性display:inline和display:block有什么...

　　答：display:inline; 元素会被显示为内联元素，元素前后没有换行符. display:block 元素将显示为块级元素，此元素前后会带有换行符. 举例： 1.display:block 111111112222222222222 按照常理来说上面二个span应该是一行显示，因为span本来就是内联... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【display】如何解决IE6／IE7不识别display：inline-block属性-inline-block

如何解决IE6／IE7不识别display：inline-block属性

关于如何解决IE6／IE7不识别display：inline-block属性的相关讨论如下：

第一章 CSS3 教程（基础）

第二章 CSS3 教程（高级）

【display】如何解决IE6／IE7不识别display：inline-block属性-inline-block

如何解决IE6／IE7不识别display：inline-block属性

关于如何解决IE6／IE7不识别display：inline-block属性的相关讨论如下：

第一章 CSS3 教程 （基础）

第二章 CSS3 教程（高级）

第一章 CSS3 教程（基础）