清除inline-block行间距

来源：互联网发布：相册排版制作软件编辑：程序博客网时间：2024/06/05 19:15

分类：

CSS（4）

作者同类文章X

做导航栏将子元素设为inline-block是最常用的方法。但不曾想，会出现以下情况：
这里写图片描述
这应该是一个很常见的问题，但现在才明白这个问题的由来和解决方法，容我先找个地洞藏一会。找到一篇非常全面的文章，inline-block元素间间隙产生及去除详解。在这里，我主要总结自己觉的比较好的解决方法，并结合自己的问题及理解做个记录。
之前做项目的时候其实已经遇到了这个问题，但因为自己并不理解这个问题的出现原因，走了很多弯路。以为是子元素设置padding导致。后来才发现这是由于标签换行产生空白字符导致；

理解了产生原因，也就不难理解几种可用的解决方法了：

1.最讨巧的就是改变html结构的几种写法，指导思想其实都是让标签不换行，但机动性太差，不建议使用，代码贴在下面，看看就好。

<div class="nav">        <div class="nav-item">我是导航栏</div><div class="nav-item">我是导航栏</div><div class="nav-item">我是导航栏</div><div class="nav-item">我是导航栏</div></div>.nav {  width: 100%; }.nav .nav-item {  display: inline-block;  *display: inline;  *zoom: 1;}1
2
3
4
5
6
7
8
9
10
11
12

.nav-item采用了兼容写法。由于IE7及以下浏览器不支持直接将元素设置为内联块，所以采取变通方式，先将block level元素设置为inline，然后再去触发该元素的hasLayout，使其拥有和inline-block相似的特性；

2.父元素设置font-size为0

还是基于“签换行产生空白字符”这个根本原因。上一种方法是让标签不换行，那么我同样也可以实现结构上换行，但是不产生空白字符，途径就是设置fon-size为0（PS：font-size设为0其实是一个非常灵活的处理方法，可以解决很多问题。例如制作响应式页面，希望侧边菜单栏宽度减小，只保留图标，但菜单名称消失，就可以将font-size设为0，当然前提是图标使用图片，而非字体图标）。子元素的字体可以正常设置。
这里写图片描述
这种方式还是存在兼容性问题。老版本Chrome浏览器有最小字体限制，可以通过设置-webkit-text-size-adjust:none来解决。

<div class="nav">        <div class="nav-item">我是导航栏</div>        <div class="nav-item">我是导航栏</div>        <div class="nav-item">我是导航栏</div>        <div class="nav-item">我是导航栏</div></div>.nav {  width: 100%;   font-size:0;  webkit-text-size-adjust:none;}.nav .nav-item {  display: inline-block;  *display: inline;  *zoom: 1;  font-size:14px}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

IE8及以上浏览器, Firefox, Opera, Safari6, Chrome18可直接使用此方案；

3.全浏览器兼容方案

<div class="nav">        <div class="nav-item">我是导航栏</div>        <div class="nav-item">我是导航栏</div>        <div class="nav-item">我是导航栏</div>        <div class="nav-item">我是导航栏</div></div>.nav {  width: 100%;   font-size:0;  webkit-text-size-adjust:none;  [;font-size:12px;];  *font-size:0;  font-family:arial;  [;letter-spacing:-3px;];  *letter-spacing:normal;  *word-spacing:-1px;}.nav .nav-item {  display: inline-block;  *display: inline;  *zoom: 1;  font-size:14px;  letter-spacing:normal;  word-spacing:normal;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

该方案主要是为了解决较低版本的Chrome和Safari的兼容问题。由于空白字符间隙与字体相关（字体与间隙对应表），为了方便设置letter-spacing数值，我们将字体设为在Windows和Mac OS中都有的arial字体，在此字体下，字号为12px时，间隙变成3px。[;font-size:12px;]是一个hack，可被IE7及以下浏览器也能识别，所以用 *font-size:0 重置一次。
所有主流浏览器均可以使用该方案。
这里还遇到一个问题。我采用sass整理这些样式，在.scss文件中直接写[;font-size:12px;]，sass报错，查资料发现有同行采用将hack中的特殊字符，如”[;”设为变量“l”，引用时“#{l}”加到相应位置。示例代码如下：

@mixin nav{    $l:'[;';    $r:';]';    font-size: 0;    -webkit-text-size-adjust:none;     *font-size:0;     #{$l}font-size:12px#{$r};    font-family:arial;    #{$l}letter-spacing:-3px#{$r};    *letter-spacing:normal;    *word-spacing:-1px;  }1
2
3
4
5
6
7
8
9
10
11
12

好，到这里我的问题已经介绍完了。希望大家都能多锤炼技术，多赚钱了。

阅读全文

'); })();