天行健, 君子以自强不息
Sunny's Blog
Title

IE浏览器下css的条件注释

IE浏览器下css的条件注释利用的是浏览器hack,适用范围是从IE5(包含)到IE9(包含),IE10及以上就不会识别这样的写法了。

其原理就是条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。但是IE将会根据if条件来解析条件注释里的内容。

                // 一个例子
                // gt : greater than,选择条件版本以上版本,不包含条件版本
                // lt : less than,选择条件版本以下版本,不包含条件版本
                // gte : greater than or equal,选择条件版本以上版本,包含条件版本
                // lte : less than or equal,选择条件版本以下版本,包含条件版本
                <html>
                    <head>
                        <title>css条件注释</title>
                        <meta charset="UTF-8">
                        <style type="text/css">
                            .test{
                                margin: 20px auto;
                                width:200px;
                                height: 200px;
                                border: solid 1px black;
                                background-color: yellow;
                            }
                        </style>  
                        <!--[if lte IE 6]>
                        <style type="text/css">
                            .test{
                                margin: 20px auto;
                                width:200px;
                                height: 200px;
                                border: solid 1px black;
                                background-color: red;
                            }
                        </style>  
                        <![endif]-->
                        <!--[if IE 7]>
                        <style type="text/css">
                            .test{
                                margin: 20px auto;
                                width:200px;
                                height: 200px;
                                border: solid 1px black;
                                background-color: blue;
                            }
                        </style>  
                        <![endif]-->
                        <!--[if IE 8]>
                        <style type="text/css">
                            .test{
                                margin: 20px auto;
                                width:200px;
                                height: 200px;
                                border: solid 1px black;
                                background-color: green;
                            }
                        </style>  
                        <![endif]-->
                        <!--[if gt IE 8]>
                        <style type="text/css">
                            .test{
                                margin: 20px auto;
                                width:200px;
                                height: 200px;
                                border: solid 1px black;
                                background-color: black;
                            }
                        </style>  
                        <![endif]-->

                    </head>
                    <body>
                        <div class="test"></div>
                    <script type="text/javascript">
                    </script>
                    </body>
                    </html>

            

地势坤,君子以厚德载物