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浏览器认识条件注释、其它浏览器会跳过

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--[if gt IE 6]>
            <style>
                body{
                    background:lightblue;
                }
            </style>
        <![endif]-->
         
        <!--[if lt IE 8]>
        <script type="text/javascript">
            alert("您的浏览器Out了,请下载更新。");
        </script>
        <![endif]-->
    </head>
    <body>
        <!--[if gt IE 6]>
            <h2>大于IE6版本的浏览器</h2>
        <![endif]-->
    </body>
</html>

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双边距问题为例。

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #p1{
                width: 100px;
                height: 100px;
                background: lightgreen;
                float: left;        
                margin-left: 100px;
                _margin-left: 50px;        
            }
        </style>
    </head>
    <body>
        <p id="p1"></p>
    </body>
</html>

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有效

以上就是css怎么让不同浏览器兼容?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读