html不同浏览器条件,css怎么让不同浏览器兼容？

世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。下面我们来看一下如何使css兼容不同浏览器。

1、CSS Hack

CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。

2、条件注释法

IE条件注释(Conditional comments)是IE浏览器私有的代码，在其它浏览器中被视为注释。

gt : greater than，选择条件版本以上版本，不包含条件版本 >

lt : less than，选择条件版本以下版本，不包含条件版本 <

gte : greater than or equal，选择条件版本以上版本，包含条件版本>=

lte : less than or equal，选择条件版本以下版本，包含条件版本 <=

! : 选择条件版本以外所有版本，无论高低

*只有IE浏览器认识条件注释、其它浏览器会跳过

示例：

3、样式内属性标记法

在CSS样式的属性名前或值后面添加特殊的字符让不同的浏览器解析。

http://browserhacks.com/在线查询， 这一个功能强大的提供各种针对性兼容办法的网站，非常实用。

“-″下划线是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

这里以IE6双边距问题为例。

代码：

#p1{

width: 100px;

height: 100px;

background: lightgreen;

float: left;

margin-left: 100px;

_margin-left: 50px;

}

4、选择器前缀法

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效