首页 > 代码库 > inline-block兼容性

inline-block兼容性

一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质。被设为行内块的元素

对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和padding等;对兄弟元素

则表现为行内框,具体表现为相邻行内块可在同一行显示,而且有着行内元素的特点,就是框与框之间可以出现

空白,造成空白的方式可以使“空白符,制表符,换行符”。

 

可以通过简单的方式消除行内块之间的空白,就是在行内块的包含块上设置属性:

  

.wrapper{font-size: 0;*word-spacing: -1px;}

font-size设为0,可以让这些空白符的大小为0,从而不显示。但是在IE6,7下存在1px间隔现象,这样可以通过

设置word-spacing来修正。

但是对于Safari来说,不支持字体大小为0,所以需要额外的修正:

@media screen and (-webkit-min-device-pixel-ratio:0) {            .wrapper {                letter-spacing: -4px; /* 修正Safari */            }        }

另外,IE6,7并没有inline-block属性,但是可以通过对行内元素触发hasLayout来模拟。

综上,修正行内块元素之间空白的方式的实现:

        @media screen and (-webkit-min-device-pixel-ratio:0) {            .wrapper {                letter-spacing: -4px; /* Safari 等不支持字体大小为 0 的浏览器,根据父级字体调节*/            }        }        .wrapper{font-size: 0;*word-spacing: -1px;}        .il{border:1px solid #000000;display:inline-block;word-spacing: normal;letter-spacing:normal;*display:inline;*zoom:1;width:80px;height:100px;background: #cecece;font-size: 14px;vertical-align: top;}        .bl{border:1px solid #000000;width:80px;height:100px;word-spacing: normal;letter-spacing:normal;background:#d0e9c6;display: inline-block;*display:inline;*zoom:1;font-size: 14px;vertical-align: top;}        img{border:1px solid #000000;}            

<div class="wrapper">
  <span class="il">inline-block 1</span>
  <span class="il">inline-block 2</span>
  <span class="il">inline-block 3</span>
  <div class="bl">block 1</div>
  <div class="bl">block 2</div>
  <div class="bl">block 3</div>
  <img src="http://www.mamicode.com/img/1.jpg" width="80" height="100">
  <img src="http://www.mamicode.com/img/2.jpg" width="80" height="100">
</div>

 

  

inline-block兼容性