各种跨浏览器兼容的CSS编码准则和技巧

理解 Floating 和 Clearing 属性

实现多栏排版的最好方法是使用 float 属性，float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右，一个设置为 float 的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的 float 对象的边界，而紧随其后的非 float 对象或内容，则包围在其相反的方向。

以下是使用 float 和 clear 属性的一些重要准则:

• 一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非  float 对象会显示到下方，inline 级内容会在旁边包围
• 要让一段内容从一侧包围一个 float  对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float
• 一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度
• 如果一个 block  对象包含 float  子对象，会出现本文中阐述的问题。
• 一个设置了 clear 属性的对象，将不会包围其前面的 float 对象
• 一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用

首先使用 IE 进行测试

虽然我们都痛恨 IE6 和 IE7，但当你开始一个新项目的时候，最好还是首先针对这两种浏览器进行测试，否则，如果你在设计在后期才想起针对 IE6 和 IE7 进行测试，将出现以下问题：

• 你将不得不使用一些奇巧淫技，甚至使用独立的 IE6/7 CSS，导致 CSS 文件臃肿。
• 某些地方的布局将不得不重新设计
• 会增加测试的时间
• 你的布局在 IE/6/7 中和其它浏览器中不一样

如果你设计的是个人项目，Web 程序等，则不建议你针对旧版本 IE 做太多工作，而对一些公司类站点，它的用户群中有大量 IE 用户，这些技巧会让你避免大量的头痛。如果将 IE 的问题归类为 IE 的 BUG 而不去处理，会带来很多负面的影响，和 IE 和平共处是 Web 开发与设计者不可逃避的现实。

译者注：在 IE6/7 仍有大量用户基础的国内（感谢中行，建行，农行，工行，以及各级政府网站

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!