inline-block间隙原因和解决方法（web前端问题）

申明：IE7无法测试，所以下面说的IE6指IE6和IE7

1,遇到的问题

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}

今天在查看w3c网站时，发现w3c推荐的导航方法，给li 添加 display:inline-bock; 达到li 平衡排列，当是意想不到的发生了，每个li之间出现了间隙。于是开始下面的不断的测试。重要代码如下：

<style type="text/css">
	body,div,h1,ul,li{margin:0; padding:0;}
	ul,li{list-style:none;}
	.nav a{background: red;color:#fff;padding: 5px 10px;}
	.nav ul li{display:inline;}
	</style>
	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">服装城</a></li>
			<li><a href="#">食品</a></li>
			<li><a href="#">团购</a></li>
			<li><a href="#">夺宝岛</a></li>
			<li><a href="#">闪购</a></li>
			<li><a href="#">金融</a></li>
		</ul>
	</div>

总结：IE8及以上IE浏览器、火狐浏览器出现4px间隙，谷歌和IE6浏览器出现8px间隙

2，inline元素 inline-block 测试

<style type="text/css">
	body,div,h1,ul,li{margin:0; padding:0;}
	ul,li{list-style:none;}
	.nav a{background: red;color:#fff;padding: 5px 10px;}
	.nav ul li{display:inline;}
	a{display: inline-block;width:150px;background: red;}
	</style>
	<a href="#" class="a1">inline元素1</a>
	<a href="#" class="a2">inline元素2</a>

v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}

Normal
0
false

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

结果：除谷歌8px间隙外，其他都是如下效果

3，block元素 inline-block 测试

<style type="text/css">
	body,div,h1,ul,li{margin:0; padding:0;}
	ul,li{list-style:none;}
	.nav a{background: red;color:#fff;padding: 5px 10px;}
	.nav ul li{display:inline;}
	a{display: inline-block;width:150px;background: red;}
	div{display: inline-block;width:150px;background: red;}
	</style>
	<div class="div1">block元素1</div>
	<div class="div2">block元素2</div>

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

以上测试浏览器大都显示如下

总结：IE6下面 inline-block 表现和现代浏览器表现不一样，也就是我们常说的兼容性

4，inline-block在IE6和现代浏览器兼容性

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

为什么会出现这种情况呢？经过查找发现一个 haslayout 的东西，他是在IE8以前存在的。下面是hasLayout 的一些知识，haslayout 是IE在渲染过程中执行，元素的属性，它的值为true 和 false，跟许多的IE兼容性有关，不过在IE8之后就取消了这个属性，鉴于现在很少考虑IE6,7，所以这个东西我也没有再去深究，先解决目前问题。

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

也就是说，是IE独有的haslayout属性影响了 inline-block的表现，

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

解决办法：设置 zoom:1; 触发 haslayout 属性，但是还不行，最终解决办法如下：

先设置为 inline样式，在触发 haslayout属性

div{display: inline-block;width:150px;background: red;*display:inline; *zoom:1;/*带*的是IE6、IE7显示的*/}

完美解决且无间隙

5，inline-block出现的原因

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

block元素下的inline-block样式间隙解决了，inline-block之间的间隙该怎么去除呢？

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

测试发现，inline元素，之间本身就存在间隙，是不是这个间隙引起的呢？

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

最终原因：inline元素中间的空白符引起的，解决办法：就是去掉空白符

第一种方法：除谷歌外的其他浏览器间隙是4px，使用margin:-4px; 唯独谷歌是双倍的8px，需要给谷歌单独设置 margin:-8px;

@media screen and (-webkit-min-device-pixel-ratio:0) { div { margin-right: -8px; } }/*谷歌 HACK 方法*/

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

第二种方法：删除代码间的空白，例如下面两个a标签紧挨着

<a href="#" class="a1">inline元素1</a><a href="#" class="a2">inline元素2</a>

可能有多种方法，我写了个人认为两种最可靠的

W3C推荐导航方法（兼容IE6等）

<style type="text/css">
		body,div,h1,ul,li{margin:0; padding:0;}
		ul,li{list-style:none;}
		a{text-decoration: none;}
		.nav a{background: red;color:#fff;padding: 10px 20px;margin-right: -4px;line-height: 40px;*margin-right: -8px;/* ie 下面也是 -8px*/}
		@media screen and (-webkit-min-device-pixel-ratio:0) { .nav a { margin-right: -8px; } }/*谷歌 HACK 方法*/
		.nav ul li{display:inline;}
		.nav a:hover{text-decoration: underline;}
	</style>

	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">服装城</a></li>
			<li><a href="#">食品</a></li>
			<li><a href="#">团购</a></li>
			<li><a href="#">夺宝岛</a></li>
			<li><a href="#">闪购</a></li>
			<li><a href="#">金融</a></li>
		</ul>
	</div>

不使用hack方法的话，每个li紧挨着即可，不要留空格等间隙

Normal
0

7.8 磅
0
2

false
false
false

EN-US
ZH-CN
X-NONE

参考文章：

什么是IE的haslayout

inline-block 前世今生

去除inline-block元素间间距的N种方法

时间： 2024-10-18 19:04:54

inline-block间隙原因和解决方法（web前端问题）

申明：IE7无法测试，所以下面说的IE6指IE6和IE7

1,遇到的问题

2，inline元素 inline-block 测试

3，block元素 inline-block 测试

4，inline-block在IE6和现代浏览器兼容性

5，inline-block出现的原因

W3C推荐导航方法（兼容IE6等）

参考文章：

什么是IE的haslayout

inline-block 前世今生

去除inline-block元素间间距的N种方法