密码
QQ：896976161
MSN：davis_sky@hotmail.com
最新动态
我们的客户
|
引子：
在做一个日本网站时候，用到一个大背景，背景需要定位在top 75px；
原为： background-position-y:75px;
在ie7，ie6，chrome浏览器都是正常的，但是后来客户反映在firefox中不能正常显示。后面查了部分资料。发现。Firefox严格按照X坐标和Y坐标来解析的。
如：background-position:top left（这里虽然明确指出是Y坐标和X坐标），但是firefox中就不能正确解析。我们需要按照正确的顺序。改成 background-position: left top；
所以在上面的错误例中background-position-y:75px;修改成 background-position：left 75px;就可以正常显示了。问题是解决了，但是我想应该还有更好的办法。如果哪位兄弟有，请联系我。qq:77985024
下面是一些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代码中务必要定义字体的大小，因为不同的浏览器，不同的用户，默认的字体大小可能是不同的，所以你需要明确定义。
