css hack

1. 在FireFox下，导航栏居中，但主体内容栏却是左对齐。

 

在div里的内容，IE默认为center，而FireFox默认为left。如果想要让其居中，刚需要在CSS中添加：

margin-left: auto; margin-right: auto;

这样就是告诉FireFox，左右一致，实现居中。（据说，这不是万能的。但我的皮肤居中了。）

 

2. 在FireFox下，有些效果不能兼容IE下的效果。例如，我的导航要求之间有10px的宽度（如果BLOG现在的皮肤是“SamTo”的话，可以看到效果），但是FireFox却不行。

 

我们可再添加一个padding-left:10px; 让FireFox实现这个效果，但你会发现在IE中，这个效果的宽度变成了20px。显然，这并不符合我的要求。

 

这里再要感叹一下，CSS的兼容和标准。首先来看一下，区别不同浏览器，CSS hack 的写法。

 

IE都能识别 *　标准浏览器(如FireFox)不能识别 *

IE6能识别 *　 但不能识别 !important

IE7能识别 *　 也能识别 !important

FF不能识别 *　但能识别 !important

IE6支持下划线 _　　IE7和FireFox均不支持下划线

CSS支持语法	IE6	IE7	FireFox
*	√	√	×
!important	×	√	√
_	√	×	×

在书写CSS代码时，书写的顺序为FireFox的写在前面，IE7的写在中间，IE6的写在最后面。

所以，我的导航的CSS代码就写成：

padding-left:10px; * padding-left:0px; _ padding-left:0px;

 

在这里没有用 !important，因为没有效果。我用!important的结果就是，IE6和IE7不兼容，或IE7和FireFox不兼容。

 

转帖自“百度空间” http://hi.baidu.com/liuhuarun/blog/item/1a6fa8182bce30b34bedbc57.html