在这里说明一下，那个!important这个写法，在IE6以上都是可以认到的。并不是网上所说的IE6不能识别！它能识别到!important，但不能理解它是优先级更高的意思！！！！
 
 
 
很多时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法
CSS书写技巧-1：!important(个人非常少用，因为一直都是定IE hack，所以样式都是先在Firefox那里测试，再写IE方面的样式。)
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器
  1. .browserTest {  
  2.     border:20px solid #60A179!important;  
  3.     border:20px solid #00F;  
  4. } 
  5.  
在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：
CSS书写技巧-2：*
IE都能识别*；标准浏览器(如火狐)不能识别*
区别IE6与火狐(如果按下面的那种方法写的话，用Firefox的Web Developer插件的时候，会报错！)
  1. .browserTest{  
  2.     border:20px solid #60A179;  
  3.     *border:20px solid #00F;  
  4. } 
区别IE7与火狐
  1. .browserTest {  
  2.     border:20px solid #60A179;  
  3.     *border:20px solid #00F;  
  4. } 
 
区别IE7，IE6与火狐
  1. .browserTest  
  2.     {  
  3.     border:20px solid #60A179;  
  4.     *border:20px solid #00F!important;  
  5.     *border:20px solid #333;  
  6. } 
 
CSS书写技巧-3：_
IE6支持下划线，IE7和firefox均不支持下划线
区别IE7，IE6与火狐(如果按下面的那种方法写的话，用Firefox的Web Developer插件的时候，会报错！)
  1. .browserTest{  
  2.     border:20px solid #60A179;  
  3.     *border:20px solid #00F;  
  4.     _border:20px solid #333;  
  5. }  
  6. /*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/ 
 
CSS书写技巧-4：*+html 与 *html
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签(在写的时候*html中间一般要有一个空格，要不然在Firefox的Web Developer插件的时候，会报错)
  1. .browserTest{ width:120px; }/* Firefox fixed */  
  2. * html.browserTest{ width:80px; }/* ie6 fixed */  
  3. *+html.browserTest{ width:60px; }/* ie7 fixed */ 
 
6)ul标签在FF下面默认有list-style和padding, 最好事先声明, 以避免不必要的麻烦;(常见于导航标签和内容列表)
7)作为外部wrapper的div不要定死高度, 最好还加上 overflow: hidden;以达到高度自适应;
处理nternet Explorer的Bug
双倍Bug
在IE下，当一个div设置了float后，然后给他设置margin，就会出现加倍的margin，解决的办法是给div设置
  1. #float{  
  2. float:left;  
  3. margin:5px;/*IE下理解为10px*/ 
  4. display:inline;/*IE下再理解为5px*/ 
  5. } 
 
边距翻倍只有当元素的边距碰到它包含块的边沿时才会发生，因此当一个元素被浮动到左边靠到另一个左浮动的元素时，它的左边距不会翻倍！
Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
3px的间隙
非浮动的列没有固定的宽度或者高度：如果如浮动相邻的列没有定义任何尺寸，那么你会发现在这个列的边沿与其内部文本之间有个3px的缩进。这个间隙只沿着浮动显示，因此当浮动终止时，文本就会移回到这个列的边上。(如果用Dreamweaver CS4检查的时候，就会有提示的了！)
非浮动的列有一个固定的宽度或者高度：当与浮动相邻的列有一个固定的布局尺寸时，又有一个3px的错误出现了---在两列之间有一个小间隙。这个问题的解决方法分两步。首先，你必须消除非浮动列的左边距(但只针对IE6及其更早的版本)：
* html #mainColumn { margin-left:0px; }
然后，必须设定浮动列的右边距为3px。这样把非浮动的列推回到位置上：
* html #sidebar { margin-right:-3px; }