inline-block间隙的问题和其涉及到的问题
2011-05-31 11:28 jalen 阅读(537) 评论(0) 编辑 收藏 举报基本了解:
1.inline-block(行内块元素)，是inline和block的混合体是在css2.1中新增的。行内块元素(替换元素)在行框内被视为行内元素，因此根据 CSS 的空白符处理规则，行内元素之间的空白符（空格、回车、Tab 键）应被合并为一个空格，可以理解为个缝隙实际上就是行内元素之间的空格，类似于单词之间的空格，
所以它的宽度是与字体相关的。所以字体越大缝隙越大。
2.我记得ie6.7中很多属性都是遵循的css2.0设置很早的以前的规范，而display:inline-block是css2.1新增的。所以没有这个属性，
但是ie6.7可以模拟：
>1.模拟对象对块级元素，在模拟为行内块元素之后，IE6,7 其实还是以块元素的空白符处理规则来处理它们之间的空白符，即忽略；
>2.模拟对象为行内元素，在模拟为行内块元素之后，IE6,7 就以行内元素的空白符处理规则来处理它们之间的空白符，
即合并为一个空格，与CSS 的空白符处理规则恰好一致，这就是很多人在说，ie6.7下只有内联元素才支持display:inline-block.
这只是模拟的表象，本质上应该是不支持inline-block这个属性(具体数据我也没查过，如有错误，后果自负),只是不支持，并不能说是ie6,7的bug问题
3.inline-block更多的情况下是为了触发ie的特有属性haslayout，和影响布局的计算值。
4.css渲染方式是左右到左地，如果不知道情况，你调了个属性的位置，出了问题，都不知道问题在哪地！
<!DOCTYPE html>
<html>
<head>
<title> inline-block </title>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,a{margin:0;padding:0;border:0 none;outline:0 none;}
body{font:12px/1.5 Arial,sans-serif,"宋体";}
.footerNav a{display:inline-block;background:#ff8000;width:100px;height:50px;margin-right:-0.5em;}
.nav li{display:inline-block;*display:inline;*zoom:1;width:100px;height:50px;background:#65ca00;margin-right:-0.5em;*margin-right:0;}
</style>
</head>
<body>
<div class="footerNav">
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
<a href="">关于我们</a>
</div>
<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>
</ul>
</body>
</html>
解决方式:
1.所以只要设置为margin-right:-0.5em;就可以了，em是相对单位，是根据你当前容器的的字体大小来计算的，如果是12px, 0.5em = 6px 14px 0.5em =7px.
为了方便直接0.5em就可以了，不必要用px太设定了。
2.这个空白符其实只要不换行就不会产生，但为了代码可阅读性，谁会愿意把很多标签写在同一行。就为解决这个问题?(最快的，最省事的解决方式)
3.也可以利用letter-spacing和word-spacing属性,来解决这个问题。
4.也可以用font-size:0的方式来解决。
以上方式3.4没测过，我不是搞academic，因为1 的方式最快solution，3.4只是为以后闲的时候留个脚印，继续测。
PS:以上问题的描述性，有待考证。以上只作为个人笔记~只是个人理解和部分内容css权威指南上所说，IE6，7到底支不支持inline-block,还要细挖资料。
所以有问题，或者谁更了解，希望留言讨论，但不是很深很深的讨论，太费时间！
