作者：YY 来源：YY,just for YY 酷勤网收集 2008-07-30
摘要
在制作页面时抛开像素级的细节问题不提，在ie6，ie7，ff中可以做到一次成形，不需要太多的hack。这条初学者可能认为很难，就我个人的经验而言，开始注意适当（不是过度）关注语义化标签；注意haslayout；使用正确的嵌套顺序
发生了什么
好久以前的经验了，再在这里总结一下。
按照我上篇文章《前端开发的责任心》写的p2的第三条：在制作页面时抛开像素级的细节问题不提，在ie6，ie7，ff中可以做到一次成形，不需要太多的hack。这条初学者可能认为很难，但是就我个人的经验而言，在我开始注意适当（不是过度）关注语义化标签；注意haslayout；使用正确的嵌套顺序之后已经很容易做到了。其中少被人提及的是：使用正确的嵌套顺序
遇到了什么
在我刚开始写css时，遇到过非常多的莫名其妙的不兼容性问题（指不出现在常见的ie hack表中的问题），所以我只好利用很多很多的hack，代码变的很糟糕。总结后所产生的原因大概都是如下几类：
- haslayout
- 嵌套错误
- 没有理解float
其中又以嵌套错误所产生的bug居多。我最初就过度关注于html标签的语义化问题而忽视了嵌套规则。
办法
有一个很清楚的嵌套规则表：Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)已经有很多热心人士翻译过了。正确的html标签的嵌套，会让浏览器按照你预想的来渲染你的代码
表的内容好像比较复杂，但其实在满足语义化的情况下，只需要做到：
- 记住那些元素是block，那些元素是inline
- block元素才能包含inline元素，反过来别这样做。
- 如果有控制之外的需求，导致inline元素包含了block元素，那么把外层的inline元素设置display:block
- 如果有元素已经是float，那么他的display属性也变成了block。
ok，如果这样做了。基本上你的页面在ie6/7 ff中的表现，应该不会和你预想的相差太多。