申明：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>
参考文章：
| 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-6-9 01:27:35