码迷,mamicode.com
首页 > 其他好文 > 详细

display:inline-block引发的间隙思考

时间:2014-06-27 16:15:14      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   ext   

一、导火线

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

bubuko.com,布布扣

<ul class="demo01">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
.demo01{width:327px; margin:0 auto;}
.demo01 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; 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),它会呈现以下模型:

bubuko.com,布布扣bubuko.com,布布扣

这意味着什么? 我们可以借助vertical-align:top;这个属性来消除垂直间隙。

如此多奇异性让我们对css充满着好奇与不解,也许正因为如此才让浮动式布局成为主流。在文中的第一部分提到:inline-block允许空格,这是否又意味着什么?在一番剖析之后,我们惊奇地得出了答案:罪魁祸首是包括换行在内的空白符。

于是我们立马消除空格、换行等家伙,结果验证了这种推断的正确性。但这并不是好的解决方案,因为在复杂的html组合体之间,我们很难避免出现换行之类的空格。解铃还需系铃人,css引发的现象,理应由css本身来解决不是吗。

三、最终的统一

也许啰嗦得太多不一定是好事,那么干脆看下我们所需要的最终模型吧!

bubuko.com,布布扣

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

让这一问题得到握手的,是font-size:0; 他的作用便是让多余的空白符消失,当然这会造成所有子元素的文本都一同消失,因此你需要再在子元素加一个font-size:12px。

display:inline-block引发的间隙思考,布布扣,bubuko.com

display:inline-block引发的间隙思考

标签:style   class   blog   code   http   ext   

原文地址:http://www.cnblogs.com/mrxia/p/3810184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!