深入研究display:inline-block在浏览器中的应用

写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。

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

按照这个解释：支持的浏览器有（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的原因。

另外一种方式就是先触发块级元素的layout 属性，然后再让他成内联元素来展现。比如p元素,可以这样写 p{display:inline-block}p{display:inline}

display：inline-block可以用来做什么？

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

使用它要注意什么呢？

在使用了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>

欢迎广大同学拍砖！！

转载于:https://www.cnblogs.com/yupeng/archive/2011/04/13/2014147.html

深入研究display:inline-block在浏览器中的应用相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
如何在浏览器中打开windows应用程序
最近由于项目需要实现一个类似迅雷从浏览器触发下载链接的功能,于是研究了一下怎么从浏览器中打开本地应用(仅限windows平台). 首先上网查了一些资料,然后发现这个功能的实现主要跟注册表有关系.需要在 ...
浏览器中实现深度学习？有人分析了7个基于JS语言的DL框架
作者:仵冀颖编辑:H4O 本文中,作者基于WWW'19 论文提供的线索,详细解读了在浏览器中实现深度学习的可能性.可行性和性能现状.具体而言,作者重点分析了 7 个最近出现的基于JavaScript ...
CSS中display：block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
CSS 中 display 的 block，inline，inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
html文本框对齐 display:block,html – 在所有浏览器中垂直对齐标签和文本框
显示:内联块声明不是IE7及以下的 fully supported,所以你必须使用display:inline而不是zoom:1 hasLayout hack模仿声明与明星hack以IE7为目标.要对 ...
display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

深入研究display:inline-block在浏览器中的应用

深入研究display:inline-block在浏览器中的应用相关推荐

最新文章

热门文章