在使用CSS控制布局的时候，经常会因为浏览器的不同解析，出现让人头痛的兼容性问题。凯尔写这篇文章，意在让大家的设计更加轻松惬意，在抓狂之前从这里找出可能的原因。
下面这些文字，都是凯尔在近一年来为小站，为PJBlog做皮的过程中的一些心得，很庆幸自己总是在解决问题之后，将一些东西简单地写在记事本中。希望能给CSS新手一点启发，得到老手们的一些共鸣与指点。

这里，凯尔抛砖引玉啦~~进入正题——

盒模型问题，避免将”padding/border”和”width”同时应用到同一元素

盒模型的问题，也是最常见的。07年年初我写过一篇文章，讲到过盒模型问题的解决方法。
这个问题的产生，要“归功”于IE5对于盒模型的错误解析，让IE系列将这个BUG延续了很久，IE7后来才解决这个问题。

避免使用不被少数浏览器支持的样式

1. “overflow-x” 和 “overflow-y”，支持的浏览器：IE6，IE7，Firefox，Safari；不支持的浏览器：Opera（包括最新的Opera 9.24），在Opera中是完全无视的。

2. “min-width”，别指望它在IE中会起作用，我们只有回避它，采用其他的方法实现该效果。

避免使用私有样式

你也许要说，为什么在Firefox中我的头像没有滤镜效果了？要注意，filter滤镜，自定义滚动条，或者自定义鼠标，都是IE的私有样式，而在其他浏览器中都不会发挥任何作用。这些IE专有的CSS扩展样式在正式标准中并不存在。

规范地书写代码

按照规范的顺序来定义某些属性中的各个值无疑是一种好的习惯，这样会减少我们出错的机会，比如：

1. 图片的对齐 background-position，Firefox严格按照X坐标和Y坐标来解析，”background-position:top 2px;”在Firefox中就会解析错误（IE中正常）。虽然”background-position:top left;”（这里明确指出是Y坐标和X坐标）在Firefox中正常解析，但书写为”background-position:left top;”是好的习惯。

2. 而在margin，padding的属性中，必须按照顺序书写。

字体大小的设定

1. 字体大小尽量不要使用小数，因为不同的浏览器解释不一样，比如 “font-size:11.5px;” ，IE7认为是12px，Opera则认为是11px。
2. 注意字体大小的极限。目前网页中主要使用的Windows宋体，在11像素或者更小的尺寸下，就会出现辨认的困难，即使浏览器使用Cleartype，表现也不好。
11px的宋体字，在IE7中，会显示为12px；但是在FF中，仍然为11px，影响辨认。
也就是说，宋体不要小于12px，这几乎是它的极限，至少要保证网页主题部分字体不小于12px。顺带说一句，对比宋体，微软雅黑使用更小的字号仍然可以非常优秀地显示，但是它没有完全普及。

3. 在你的CSS代码中务必要定义字体的大小，因为不同的浏览器，不同的用户，默认的字体大小可能是不同的，所以你需要明确定义。

说了这么多，而最有效的方法就是在不同的浏览器上细心地调试了，代码写好了，首先在最新的浏览器上调试，而不是原来的版本。
常见的浏览器，都还是要装到电脑上的，如IE7，IE6，Firefox，Safari，Opera。建议安装IE7，然后下载绿色版的IE6。

上面的内容，并不能达到全面和完备，只是自己遇到过的一些问题。今后会继续更新。

———————————–

PS：做个标题的图片，找了快一中午的素材，不容易呀……
似乎太花了点，图片把标题的注意力抢走了 -。-