Windfly`s Blog-一个注重技术分享的博客
  1. 首页
  2. 技术研究
  3. 内容

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

以下大部分内容摘自——display:inline-block引发的间隙思考

由上一篇文章我们可以知道,inline-block产生空白空隙的原因是由空白符导致的,既然如此,我们该如何办呢?

可以通过hack的手段让inline-block元素设置以下样式属性:{display:inline-block;*display:inline;*zoom:1;}

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

而在这一问题之前,你也许需要放松一下,来看看下面这样一个现象。但是这个中间会有间隙,试过用去掉外边距和内边距都不行,最后终于找出原因了,是空格和换行等家伙造成的,因为在复杂的html组合体之间,我们很难避免出现换行之类的空格。终于找到解决的方案了:解决方法是将父级font-size:0;例如:

nav ul{font-size: 0;}
nav ul li{display: inline-block;*display:inline;*zoom:1; font-size:12px; color: #22904a;}

倘若以上还不能解惑,可以参考以下几个大神写的文章,链接以下附上:
浅谈inline-block及解决空白间距
inline-block元素的4px空白间距解决方案

  CSS HTML
分享到

作者  :  windfly

本文由 windfly 原创,未经作者许可禁止转载!转载若许可请注明来自 Windfly`s Blog



评论列表