如何解决IE6/IE7不识别display:inline-b... - 分享生活和学习中的点点滴滴

如何解决IE6/IE7不识别display:inline-block属性

前端技术 2023/09/03 CSS

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 
</body> 
</html>

可以看到在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 {
display:inline-block; /* firefox等标准浏览器识别*/ 
*display:inline; /* 只有ie6和ie7识别*/zoom:1; /* 触发ie6和ie7下的haslayout */ 
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>

本文地址：https://www.stayed.cn/item/7556

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)