小问题？大难题？？
2009年12月11日
| 标签: inline-block, 浏览器
相信对每一个玩代码的同学来说，搞大的项目、大的网站才会爽，这样也有成就感；对于前端们，当你写过上千行代码、几十多K的css样式表后，是否有种任何结构都不在话下的感觉？可有时候，不正常的浏览器解析却常常会和你开玩笑，一个简单的效果，也会让人摸不着头脑。。。
下面看个简答的例子：
要实现这样的效果，结构很简单，可以选择不同的标签：
- <div class="nav">
- <p><a href="#">新闻</a></p>
- </div>
样式代码，也很容易书写：
- *{margin:0; padding:0;}
- .nav {width:300px; background:#f00; text-align:left; padding:20px; margin:0 auto;}
- .nav p {background:#ccc; text-align:center;}
- .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的支持，这个神秘的属性将会越来越发挥着重要的作用！！
效果好多了
呵呵，我水平低了，看不懂….
呵呵，这种东西么有高低之分，多谢朋友捧场。。。
灵异事件
呵呵。
嗯，确实很邪门。。。
我才入门，这个还没用到过呢，唉。
这是一篇非常有价值的文章！鉴定完毕~
大难题
翔子博客更换服务器 速度更快！ 欢迎来访哦^_^
现在是风口浪尖的时候，换主机要注意啊。。。
打错字了 是研究哈!呵呵
你眼睛css是越来越深了.
这个的确是要有心得才能写得出这样的文章
夜路走多了总会遇到的。。。
试了下~~在a标签使用padding高度是没变化的- -！宽度倒是变了~~
新闻
啊？你那显示的效果和我的不一样吗？
效果是一样的~~
我是说在没有inline-block的时候。。。padding高度没变化~~
《a style=”padding:20px;” href=”#”》xxx《/a》
嗯，行内元素有时候确实会有这样的问题，现在可以用inline-block来解决。
我也试试怎样做~~inline-block还没搞懂是什么东西~~