关于CSS，我相信刚入门或者入门没有多久的人都会觉得，CSS太难兼容各个浏览器，兼容了IE6不兼容IE7，兼容了IE7的话IE6又有问题，还有IE8，IE9，FirFox，Chrome等等浏览器。
或许你会从网上去找兼容各种浏览器的不同方法，比如所说的hackbox，这是利用不同浏览器对于一些特别的代码的认可性。比如：
.class{margin-left:10px;}
*html .class{ margin-left:20px;}
这样写的话class左边外间距就是10px，那么*html只能在IE6下面被识别，其他浏览器是不认识他，那么其他浏览器依然是左边外间距10px， 然而在IE6下面则成了20px，这个和程序一样，代码从上往下执行，下面的覆盖上面的。除了这样的还有其他的各种浏览器的不同标签，还有<!– !important –>等等。这样做也太繁琐了，而且终究不是正道，或许我们会想有没有一种代码方式，可以不用做特殊处理就兼容各种浏览器呢？有。
CSS代码写出来为什么不会兼容各种浏览器？你 去网上搜索一下，主要原因还是各种浏览器对于margin，以及padding还有float等几种个别的属性不兼容而已，所以我们尽量的要处理好这几种 属性，或者可以说是避免使用margin以及padding。你可能会问，不使用margin和padding的话能用CSS写出合适的页面吗？内外间距 怎么办？怎么处理？
我们拿一个很简单的例子来说吧，
<ul>
<li></li>
<li></li>
</ul>
我相信以上这四行代码在写CSS的时候再常见不过了，而这段代码就这么直接产生的效果肯定不是我们想要的，我们要给它调颜色，间距等等，然而调间距就涉及 到了margin和padding，然后涉及到这两个东西的时候又会造成各个浏览器显示的内容不一样，那么，我们可不可以换一种方式来达到我们要的效果 呢？当然可以，我们直接给<li>标签设置固定的高度，宽度，以及行高，这样也可以达到我们想要的效果，你不妨试一下。
至于float造成的变形，也很好办，比如一行三个栏目，不要想着前面两个栏目float:left;第三个就不用了，不要珍惜那一句代码，第三个也要写上，这一行布局完之后记得清除浮动，clear:clearboth;然后再开始布局下一行。
还有比较重要的一点就是，浏览器对于CSS的各种属性的默认值是不一样的，所以在刚开始一定要定义全局代码，清除margin，padding等等，这样不仅仅对于兼容浏览器有帮助，也对于你能写出高效代码有帮助。
CSS代码布局要严谨，每个DIV宽和高（有时候需要auto）是多少px就是px，一定要定义清楚，因为各个浏览器的默认值也不一样，还有就是为 每个div都用上overflow:hedden；清楚溢出，这样即使是有些地方使用了paddding，也不对你的整体布局造成明显的影响。
最后，还是需要多多尝试，多多思考，多多总结。以上内容页是我自己慢慢摸索出来的。
本文转自黄聪博客园博客，原文链接：http://www.cnblogs.com/huangcong/archive/2011/06/28/2092116.html，如需转载请自行联系原作者
