inline-block的应用

一个无限多自动居中，并且a还是块级（不是真的，但可以看a的焦点虚线框为证）的列表。

以前的做法挺神伤的，要使内联元素成为一个块级，就不可避免使用display:block;预示这必须用float:left;（不然导航都不在一行了）当然后果就是无法自动居中了。

Dreamweaver CS4提示ie6、7，Opera8、9，Safari2不支持inline-block这个值。但是我测试后发现都能够支持这个值，看来是CS4误报。

以后就用下面这个啦。（思路就是这样）
<style type="text/css">
ul{text-align:center;}
ul li{display:inline;}
ul li a{display:inline-block;padding:3px 10px;border:solid 1px #aaa;}
</style>

<ul>
<li><a href="#">one</a></li>
<li><a href="#">one</a></li>
<li><a href="#">one</a></li>
<li><a href="#">one</a></li>
</ul>

下面测试下加了inline-block和没加的区别,可以从焦点虚线框看出来（在IE中）。

• 第一个A的Style: style="padding:10px 5px;background:#eee;border:solid 1px #999;"
• 第二个A的Style: style="padding:10px 5px;display:inline-block;background:#eee;border:solid 1px #999;"

没加display:inline-block;

加了display:inline-block;

虚线框响应范围“错误”只在IE类浏览器才有。opera没有焦点虚线框之类的提示。Firefox和Safari中2个A标签都能正确确定焦点虚线框的响应范围。
不过在所有测试的浏览器中，都可以看出第二个A标签的高度大于第一个A标签约5px。