浏览器css兼容性,我的解决方法,不用!important

最近很多朋友都问我浏览器的兼容性问题，我一时也不知道从哪里说起。自己写得出，但不一定说得出。百度一下就搜到一个兼容大全，基本上算是写两种样式来兼容。见得最多的是!important。很多朋友的代码动辄就上千行那么长了。
我很纳闷，我写的css代码几乎不用!important，而且我写CSS追求一个字“简”，通常一个站的css写下来都没过500行。但是我的代码也同样兼容IE6，7、火狐、Opera。

我写CSS的风格多半是多参考国外的写法而来的，国外的大多也是很少会见到!mportant的写法，而且代码规化很合理，代码相当简洁，能重用的样式绝不多定义一个class来表达。还有就是国外大数好的网站所用单位是em。
话说回来，到底哪种写法好倒是没什么定论，我今天博这篇文章只是说说我个人写css的经验，好了，不费话，上方法：

1、ie6下面，div的height会因为嵌套在div里面的div撑开，而ie7和火狐则不会，所以在写嵌套较多的div时，本人不建议用height属性，建议用加上overflow:hidden;将div的高度自动撑开。

2、虽说各浏览器margin和padding的象素理解是不一样的，不过height的理解一样，在嵌套较小的情况，比如网页的版头，我一般会用height来定义版头div的高度，然后给版头加一个背景。有背景图片的话，height属性一般不跟margin和padding一起用，因为各浏览器margin和padding的象素理解是不一样。举个例子，我们给版头定义了一个{height:50px;padding:10px;}然后放一个背景图片，背景图片的高度为70px;某些浏览器一刷新就会发现显示不全，或者是下部会多一块白。我们把样式定成{height:70px;}然后加背景，如此各浏览器显示就相同了。

3、有些朋友在一个网页里面会定义很多次字体、行高、字号等，其实很多情况下，那些字体定义都是无用的。比如下面的代码就是重复定义：
BODY {
  FONT-SIZE: 12px; MARGIN: 0px; COLOR: #16387c; FONT-FAMILY: Arial
}
TD {
  FONT-SIZE: 12px; MARGIN: 0px; COLOR: #16387c; FONT-FAMILY: Arial
}
TH {
  FONT-SIZE: 12px; MARGIN: 0px; COLOR: #16387c; FONT-FAMILY: Arial
}
在body里面定义了FONT-SIZE: 12px; COLOR: #16387c; FONT-FAMILY: Arial样式，而整个页网所有的字体都会默认是这个样式了，没必要再在td、th里面再定义一次，虽然显示也没问题，不过代码不简洁。
我个人比较偏向于国外的简洁风格，我做的页面所用字体字号一般不会超过两种，通常就是只在body里面定义一个FONT-FAMILY和line-height，然后其它地方就很少出现这两个样式，这样也保持了页面风格的统一。

4、记住加单位，在ie6下面，margin和padding是可以不用加单位也能显示的，如padding:10;但是这不符合w3c标准，在火狐下面就会出显示不出，我们得把样式写成如下，padding:10px;margin:10px;

5、写css前做好规化，很多样式相差不多的，如左侧栏右侧栏里面的面板，它们的class是一样的，我们就没必要每个面板定义一次样式了。又比如红色提示字体和clearboth在页面出现率较高的样式我们给他们单独定义。

6、写继承，很多人写css是全是父类，
如.contain{} .tit{} .contents{}
这样写显示也正常，不过样式多时，要查找就有些困难。我以前做信息网时，页面样式相当多，而我当时就是那种全父类的写法，也不知道什么原因，某些样式不识别了，特别是在ie6下面还会出现断开的样子。
因此我建议写成.contain{} .contain .tit{} .contain .contents{}

7、精简代码，在css下面有几种可以精简的。
如下边框代码
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
  
可以简写成：border:dotted 1px #fff;
或者：
border-top:dotted 1px #fff;
border-left:dotted 1px #fff;
border-right:dotted 1px #fff;
border-bottom:dotted 1px #fff;

下面边距代码
margin-top:10px;
margin-left:40px;
margin-right:20px;
margin-bottom:30px;
可以简写成：margin:10px 20px 30px 40px;

同理
padding-top:10px;
padding-left:40px;
padding-right:20px;
padding-bottom:30px;
可以简写成：padding:10px 20px 30px 40px;

下面背景代码
background-repeat: no-repeat;
background-color: #fff;
background-image: url(../images/bg.jpg);
background-position: left top;
可以简写成：background:#fff url(../images/bg.jpg) no-repeat left top;


其实要写出兼容又快速又规范的代码，还有一个很快速的方法，那就是用Dreamweaver自动生成的css模板。
打开Dreamweaver CS3，点击文件->新建，直接看右侧的布局卡中，上面有很多种布局方式的页面供我们选择，还等什么，直接选一个吧。
点击确认后看看CSS代码，注释写得超详细，而且兼容各大浏览器，里面也没有见有用到!important的。(哇噻！DW太人性化了，爱死你了。)


----------------华丽的分割线------------------------------

多上w3c网站研究研究，收获会比百度google搜出来的东西更大。代码规范说再多只是说，最重要的是多实践，经验最重要，有很多很多的问题是在实践中碰到的。呵呵，就说这么多，这篇文章我写的是我的代码风格，有什么不对欢迎大家来指出。

转载于:https://www.cnblogs.com/pelephone/archive/2008/10/24/ie-firefox-no-important-css.html