您现在的位置是：网站首页> 编程资料编程资料

使用font-size：0px 来制作跨浏览器的inline-block css属性 _CSS教程_CSS_网页制作_

2021-09-08 1071人已围观

简介 像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。

像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。

现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。



下面是inline-block兼容的代码：

复制代码
代码如下:

display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top;


但是大家有没有发现，在firefox，safari，opera，ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 inline-block 元素间的换行符去掉，这3px的间距就会消失了。

有没有在不影响代码美观的情况下去掉间距尼，答案是有的。可以在inline-block的父元素中加上 font-size：0；然后在 inline-block讲字体设回来。


复制代码
代码如下:









写成一行的 line-block



  • 我是inline-block 我是inline-block 我是inline-block
  • 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block
  • 我是inline-block 我是inline-block 我是inline-block



我是inline-block 我是inline-block 我是inline-block
我是inline-block 我是inline-block 我是inline-block
我是inline-block 我是inline-block 我是inline-block
我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block


有换行符的 line-block



  • 我是inline-block 我是inline-block 我是inline-block

  • 我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block

  • 我是inline-block 我是inline-block 我是inline-block



我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block

我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block

我是inline-block 我是inline-block 我是inline-block

我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block



父级使用了font-size:0的 line-block



  • 我是inline-block 我是inline-block 我是inline-block

  • 我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block

  • 我是inline-block 我是inline-block 我是inline-block



我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block

我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block

我是inline-block 我是inline-block 我是inline-block

我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block






上一篇：关于游览器对CSS的渲染_浏览器兼容教程_CSS_网页制作_

下一篇：解决IE6下，给图片加上line-height属性不起作用的解决方法 _CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网