IE六、7下inline-block不起做用

时间 2019-11-14

标签 inline block 不起繁體版

原文原文链接

网上查到资料是给元素设定display:inline-block，再触发layout，设定display:inline;由于全部的浏览器都支持inlie。css

即: div{display:inline-block;} div{display:inline;}

原理在下面：

写在前面的话，在我开发CSS的过程当中，我发现不少诡异的问题都是对概念理解有误差，因此在每篇开始的时候，我都把W3c的解释拿出来晒晒。我的经验，不少的问题看看W3C通常都可以解决，W3C是最好的参考书。html

官方解释：将对象呈递为内联对象，可是对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行内，容许空格。 chrome

按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,因为我是用firefox3.6测试的），ie6，ie7 是不支持这个属性的。浏览器

ie6,7 如何支持这个属性呢？布局

对于块级元素，直接让块级元素成行内元素，而后再触发layout。 {display：inline;zoom:1}，可能有的同窗会说，怎么说ie6,7不支持这个元素呢？测试

我不是常常在ie6,7的a标签、span 下使用这个属性吗？也起到了做用，这里理解可能有一个误区，使用display：inline-block是触发了layout的缘由。ui

另一种方式就是先触发块级元素的layout 属性，而后再让他成内联元素来展示。好比p元素,能够这样写 p{display:inline-block}p{display:inline} spa

display：inline-block能够用来作什么？firefox

能够作的事情不少，能够写顶部的菜单，能够图文混排，能够内嵌block元素，也能够至如inline元素中，能够作信息卡片，如百度空间搭讪有缘人的卡片有缘人记念日的固定宽度的书写，固然也能够作布局。万变不离其宗，我以为最本质的就是利用它的使元素为内联对象，可是内容作块状呈递。这点咱们应该牢记。只要理解了它的本质东西，咱们才能够以不变应万变，甚至能够创造本身的东西。htm

使用它要注意什么呢？

在使用了display：inline-block的元素之间有换行符，空格间隙问题。

1.块状元素被设置了display：inline-block后，ie6,7没有空格问题。其余浏览器都有。以下图所示：

在ie8，ie9，firefox能够经过使用font-size:0来解决，可是chrome很悲剧。仍是有空白，我使用的是chrome10。不能清除。能够经过添加letter-spacing属性

的值来解决，建议做者经过尝试来解决这个问题。我设置的值是-8px刚才好清除空白。我担忧这会不会有相互覆盖问题。后来我将值调大到-28px，果真，在chrome中有覆盖，可是在其余的浏览器中没有。可看法决这个问题以chrome为主。

2.内联元素被设置了display：inline-block后，全部的浏览器都有换行，空白间隙问题。

以下图所示：

全部浏览器，ie6,7,8,9 chrome，firefox都有空白，

怎么解决呢。直接在包含的元素上添加letter-spacing:-8px; 便可。

最后附上我研究的代码：

1 <!DOCTYPE HTML>
 2 <html >
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
 5     <style type="text/css">
 6 * { margin:0; padding:0 }
 7 #doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial; }
 8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
 9 dib{display:inline-block}
10 div{display:inline-block;}
11 div{display:inline;}
12 ul{letter-spacing:-8px;}
13 ul li{display:inline;zoom:1;}
14     </style>
15     <title></title>
16 </head>
17 <body>
18     <div id="doc">
19     <h4>display:inline-block的研究</h4>
20     <div class="dib">测试这个属性的支持状况1</div>
21     <div class="dib">测试这个属性的支持状况2</div>
22     </div>
23     <ul >
24     <li><img src="dj.jpg"/></li>
25     <li><img src="dj.jpg"/></li>
26     </ul>
27     <div style="letter-spacing:-8px;">
28     <img src="dj.jpg"/>
29     <img src="dj.jpg"/>
30     <img src="dj.jpg"/>
31     </div>
32 </body>
33 </html>