一聚教程网:一个值得你收藏的教程网站

热门教程

css display:inline-block间隙的一些思考

时间:2022-06-25 11:18:28 编辑:袖梨 来源:一聚教程网


没错,总有一类属性在助你轻松寻得捷径的同时,也可为你增添烦劳,比如本文的主谋display:inline-block。众前端们所诸知,其作用是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。然而不幸的是,它并没有得到所有浏览器的支持,比如ie6、7和古老一点的firefox完全无视它,由于firefox的老版本几乎已经从市场中消失,所以名义上firefox是支持display:inline-block的,除此之外,伟大的chrome、Opera、Safari都能很好地支持。尽管如此,依然还是可以通过hack的手段让ie6、7两位难兄难弟变得温顺,比如像这样:

 
 
 
 
 
 












.demo01{ margin:0 auto;}
.demo01 li{display:inline-block; *display:inline; *zoom:1; border:1px solid #848484; background-color:#999;}

需要解释的是,display:inline-block在IE下仅仅是触发了layout,而它本是行布局,触发后,块元素依然还是行布局。所以需让块元素呈递为内联对象,display:inline则起到了这一作用(*号只被ie6、7所识别),然后再通过zoom:1触发layout。即可实现所谓的inline-block。但事情远远没有结束,这个家伙面临多项后事需要您来处理,比如会默认有外边距(ie6、7除外)。而在这一问题之前,你也许需要放松一下,来看看下面这样一个现象。

上面提到,尽管inline-block默认会存在间隙,那么当我们试图对其中的某一个元素单独设置margin-bottom或者padding-bottom时(当然你也可以试着设置margin-top或者padding-top),它会呈现以下模型:


这意味着什么? 我们可以借助vertical-align:top;这个属性来消除垂直间隙。
如此多奇异性让我们对css充满着好奇与不解,也许正因为如此才让浮动式布局成为主流。在文中的第一部分提到:inner-block允许空格,这是否又意味着什么?在一番剖析之后,我们惊奇地得出了答案:罪魁祸首是包括换行在内的空白符。
于是我们立马消除空格、换行等家伙,结果验证了这种推断的正确性。但这并不是好的解决方案,因为在复杂的html组合体之间,我们很难避免出现换行之类的空格。解铃还需系铃人,css引发的现象,理应由css本身来解决不是吗。

也许??碌锰?嗖灰欢ㄊ呛檬拢?敲锤纱嗫聪挛颐撬?枰?淖钪漳P桶桑?/p>


.demo02{ margin:0 auto; font-size:0;}
.demo02 li{display:inline-block; *display:inline; *zoom:1; border:1px solid #848484; background-color:#999; vertical-align:top;}

 
 
 
 
 
 




 代码如下
复制代码


.demo02{ margin:0 auto; font-size:0;}
.demo02 li{display:inline-block; *display:inline; *zoom:1; border:1px solid #848484; background-color:#999; vertical-align:top;}


让这一问题得到握手的,是font-size:0; 当然,vertical-align:top;也算是半个功臣,尽管当font-size出现时,他的作用已经不再重要。


热门栏目