相信对每一个玩代码的同学来说，搞大的项目、大的网站才会爽，这样也有成就感；对于前端们，当你写过上千行代码、几十多K的css样式表后，是否有种任何结构都不在话下的感觉？可有时候，不正常的浏览器解析却常常会和你开玩笑，一个简单的效果，也会让人摸不着头脑。。。

下面看个简答的例子：

小问题？大难题？？

要实现这样的效果，结构很简单，可以选择不同的标签：

  1. <div class="nav">
  2.     <p><a href="#">新闻</a></p>
  3. </div>

样式代码，也很容易书写：

  1. *{margin:0; padding:0;}    
  2. .nav {width:300px; background:#f00; text-align:left; padding:20px; margin:0 auto;}
  3. .nav p {background:#ccc; text-align:center;}
  4. .nav p a {background:#fff; padding:10px;}

这时候你是否觉得OK啦？那看下效果吧。

提示：你可以先修改部分代码再运行。

你看到的结果是不是这样的？

小问题？大难题？？

检查代码，页面结构是对的，也没有拼写错误…很奇怪！为什么会显示成这样？这是为什么呢？？

仔细分析：最外层的div标签显示正常；p标签的高度只是文字本身的高度，却没有被a标签的padding值撑开；而最奇怪的a标签，为什么会显示在其父级标签p的上层呢？难道是IE的Bug？再看火狐和谷歌浏览器，也有同样的问题，这个可以排除。难道是a标签捣的鬼？换个标签，却还是这样的问题，难道这样的结构无解了吗？

在尝试用float后，突然想起一个属性，赶紧试试，哈，搞定！！

提示：你可以先修改部分代码再运行。

对，就是inline-block。在a标签中定义display:inline-block就可以显示正常。这也说明，在以后的行内元素（inline）使用中，如果有类似的情况，完全可以使用inline-block来解决。虽然我还没有深入了解这其中的具体原因，但随着FF3对inline-block的支持，这个神秘的属性将会越来越发挥着重要的作用！！