如何解决浏览器的兼容性(转载)

方法一：初学div css网页布局的设计者经常会被一个问题困扰着。

  在IE和其他(Mozilla、Opera等)浏览器里显示的效果经常会偏差2px。
  这是因为IE对盒之间距离的解释的bug造成的。一个技巧提示帮我们找到了解决的方法：用!important。

  !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。
  语法格式{ sRule!important }，即写在定义的最后面，如：

  Example Source Code [www.mb5u.com]
  box{color:red !important;}
  最重要的一点是：IE5.IE6直都不支持这个语法，而其他的浏览器IE7 IE8 FF都支持。我们就可以利用这一点来分别给IE和  其它浏览器不同的样式定义。如：
  border:20px solid #000 !important;
  border:20px solid #CCC;
  padding: 30px;
  width : 300px;
  }
  在Mozilla中浏览时候，能够理解!important的优先级，因此显示#000的颜色；
  在IE中浏览时候，不能够理解!important的优先级，因此显示#CCC的颜色。

  可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!  important。

  !important必定成为CSS布局的利器，请记住它、把握它、并合理的加以利用！

方法二:

  针对Firefox ie6 IE7的Css样式

  现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+Html”，现在用IE7浏览一下，应该没有问题了。

  现在写一个CSS可以这样：

  #1 { color: #333; }
  * html #1 { color: #666; }
  *+html #1 { color: #999; }

  那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

 

方法三: 判断浏览器的版本编写不同的css

  <!-- 默认先调用css.css样式表 -->
  <link rel="stylesheet" type="text/css" href="css.css" />

  <!--[if IE 7]>
  <!-- 如果IE浏览器版是7,调用ie7.css样式表 -->
  <link rel="stylesheet" type="text/css" href="ie7.css" />
  <![endif]-->

  <!--[if lte IE 6]>
  <!-- 如果IE浏览器版本小于等于6,调用ie.css样式表 -->
  <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

  注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

方法四:

  _text-align:center;
  _属性名字：属性值； 这个属性只会在ie6被识别，其他浏览器不支持！

原文：http://blog.sina.com.cn/s/blog_5155e8d40100f07t.html