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

最新推荐文章于 2024-08-07 10:29:06 发布

SirM2z

最新推荐文章于 2024-08-07 10:29:06 发布

阅读量618

点赞数

分类专栏： css 文章标签： CSS inline block 兼容性空白间距

本文链接：https://blog.csdn.net/SirM2z/article/details/79973706

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 属性可去掉元素垂直方向的多余空白*/  
}