inline-block 的兼容性 与 空白间距解决方案

inline-block

inline-block 兼容性

兼容 IE > 7,兼容(IE < 8)写法:

.father{
  display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
  zoom:1; *display:inline; /* IE6、7 block 元素 */
}

或:

/* IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失 */
.father{
  display:inline-block; /* 现代浏览器 +IE6、7 inline 元素 */
}
.father{
  *display:inline; /* IE6、7 block 元素 */
}

解释:在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置display: inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline-block属性是不会触发元素的layout的,因此我们还要额外加上 zoom:1来触发layout

inline-block 元素间间距 产生原因

inline-block 水平呈现的元素间,换行显示或空格分隔的情况下会有间距

详细解释:我们写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

如下:

<ul>
  <li style="display:inline-block;">1</li><!-- 这里有换行符 -->
  <li style="display:inline-block;">2</li><!-- 这里有换行符 -->
  <li style="display:inline-block;">3</li>
</ul>

解决方案一

<ul>
  <li style="display:inline-block;">1
  </li><li style="display:inline-block;">2
  </li><li style="display:inline-block;">3</li>
</ul>

解决方案二

ul {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
}

解决方案三

li {
  display:inline-block;
  zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
  word-spacing:0;
}
ul {
  display:table;  /* 调教webkit*/
  word-spacing:-1em;
}

解决方案四

ul {
  letter-spacing: -0.31em; /* webkit */
  *letter-spacing: normal; /* IE < 8 重置 */
  word-spacing: -0.43em; /* IE < 8 && gecko */
}

li {
  display: inline-block;
  zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top; /* display:inline-block元素本身定义 vertical-align 属性可去掉元素垂直方向的多余空白*/  
}

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值