Web 标准下兼容多浏览器的 CSS 布局常用技巧 http://bbs.ixuer.net/viewthread.php?tid=1410&extra=page%3D1

作者：guidy
时间：12:58 2007-07-09
--------------------------------------------------------------------------------
常规：
----------
1、以 div 替换 table，数据型列表除外
2、为每个布局区块做一个 id 标识，以 id 选择器编写
3、同一页面，多处需要用到的 CSS 样式，定义为 class 选择器
4、尽量将 css 代码放入外联文件
5、尽量不要使用标签内的 style 属性

兼容性：
----------
6、注意了解 XHTML 下允许使用的标签，以及 css 的相关语法
7、准确理解 css 盒模型在 IE/FF/OP 等浏览器下面的差别
8、在需要内容补白（比如需要使用 margin 或 padding 的时候）的情况下，最好嵌套一层 div，并指定它的 padding，这样可以解决盒模型在各个浏览器表现不同的问题
9、在无法使用嵌套 div 解决问题的时候，注意使用 !important 修饰符，IE6及以下版本浏览器不认识此修饰符，这种方法通常用于修复一些控件尺寸单位在各个浏览器下的兼容问题。
10、特殊语法，以下语法分别解决一些复杂的布局在各个浏览器的兼容性问题：
/* normal specific rules */
#PopMenu { float:left; background:transparent url(../../../../DefaultSite/Default/Images/iXs_MenuShadow.png) no-repeat scroll bottom right ; margin:4px 0px 0px 4px; padding:0px; visibility:hidden; z-index:2006; position:absolute; overflow:visible}
适用于各种浏览器，对于 FF/OP 等浏览器的处理可以在这里实现

/* MSIE 6 specific rules */
* html #PopMenu { float:left; background:transparent url(../../../../DefaultSite/Default/Images/iXs_MenuShadow.gif) no-repeat scroll bottom right ; margin:4px 0px 0px 4px; padding:0px 0px 4px 0px; visibility:hidden; z-index:2006; position:absolute; overflow:visible}
适用于 IE6 浏览器，也只有 IE6 浏览器支持这个语法

/* MSIE 7 specific rules */
*:first-child+html #PopMenu { float:left; background:transparent url(../../../../DefaultSite/Default/Images/iXs_MenuShadow.png) no-repeat scroll bottom right ; margin:4px 0px 0px 4px; padding:0px 0px 4px 0px; visibility:hidden; z-index:2006; position:absolute; overflow:visible}
适用于 IE7 浏览器，也只有 IE7 浏览器支持此语法。因为 IE7 和 FF/OP 等遵循标准的浏览器都认识 !important 修饰符，所以有时候要解决布局问题还得单独解决 IE7 的问题。

测试：
----------
11、建议在 FireFox 浏览器下调试 css 样式表。因为它是一个遵循标准的浏览器，其他浏览器虽然都有各自的规则，但都在向标准靠近，所以在这里能完美表现的 css 一般不用做任何修改都可以在其他浏览器正常显示。可以大大减轻工作量。
12、各个浏览器的调试顺序：FireFox、Opera、IE6、IE7、其他。在 FF 下是标准的展现，OP 也是遵循标准的，它和 FF 的区别很小，所以先调试它，然后再调试 IE6，可以说 IE6 才是主要的用户群体，最后是 IE7 和其他。