浏览器兼容处理

条件注释:

两个--和左中括号[之间不能有空格,否则无效

[1]IE9-(<!--[if IE]><![endif]-->)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: red;
}
</style> 
</head>
<body>
<!--[if IE]>
<div class="box" id="box"></div>
<![endif]-->
</body>
</html>

  [2]仅单一IE(<!--[if IE 6]><![endif]-->);

[3]大于 gt ||  大于等于 gte || 小于 lt || 小于等于 lte(<!--[if gte IE 8]><![endif]-->)

[4]非IE(IE10+也能识别),此处多加的<-->,在IE中被当作内部注释,而在非IE浏览器中会闭合之前的注释(<!--[if !IE]><--><![endif]-->)

CSS :

1]IE6-(下划线、中划线)(_color:blue;-color:blue;)

[2]IE7-(星号、加号)(*color:blue;+color:blue;)

[3]IE10-(\9)(color:blue\9;)

[4]IE8+(\0)(color:blue\0;)

[5]IE9、IE10(\9\0)(color:blue\9\0;)

选择器前缀法:

[1]IE6-(*html)

IE7(*+html)

IE8(@media \0)

IE9+及其他非IE浏览器(:root)

[6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))

posted @ 2016-09-26 10:05  Terre  阅读(195)  评论(0编辑  收藏  举报

风光无限好