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

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

1,遇到的问题

今天在查看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>

 

 结果：除谷歌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>

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

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

 

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

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

也就是说，是IE独有的haslayout属性影响了 inline-block的表现，解决办法：设置 zoom:1; 触发 haslayout 属性，但是还不行，最终解决办法如下：

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

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

  完美解决且无间隙

5，inline-block出现的原因

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

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

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

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

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

 第二种方法：删除代码间的空白，例如下面两个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紧挨着即可，不要留空格等间隙

后续的：

 因为在使用中，经常会给导航一个1000px宽度，居中，这个时候就会出现一个padding 和 高度 不相同，一个兼容性，于是用了另一个方法

<style type="text/css">
	body,div,ul,li{margin: 0; padding: 0; }
	ul,li{list-style: none;}
	a{text-decoration: none;}
	h1{width: 1000px; margin:0 auto;}
	.nav{width: 1000px; margin:0 auto; }
	.nav a{display: inline-block; height:40px; padding: 0 25px; background: red;line-height: 40px;background: red;}
	.nav li{display: inline;}
	.nav a:hover{background: green;color:#fff;}
	</style>
</head>
<body>
	<!-- ul 设定宽度后，与a标签的高度会有一个 4px或8px的间隙，造成兼容性-->
	<h1>导航一</h1>
	<ul class="nav">
		<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>

 

参考文章：

什么是IE的haslayout

inline-block 前世今生

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

 

 

 

posted @ 2015-03-06 00:00  诚人小李  阅读(4044)  评论(4)    收藏  举报