HTML Hack

Hack 顯示的 HTML

                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    不是 IE5-9

瀏覽器測試顯示文字

不是 IE5-9

不支援顯示
可用 meta 跳轉至提示瀏覽器頁面，或使用樣式壓在最上面。

Hack 載入的 CSS

Hack 載入的 class 各種方式（針對 html 標籤）

                
                
                
                
                
                
                
                
                
                
                
                  <html>                                

                
                
                
                
                
                  <html class="">           
                
                
                
                
                
                
                  <html dir="ltr" lang="en-US" class="no-js">  
                
                
                
                <body>

CSS Hack

大部分 css 都會用 html Hack 較為穩定，而在 css 裡可以依少量東西做調整使用
此外，css Hack 在 W3C 的驗證中是無法通過，非必要情況才需用！

Hack 載入的 CSS

                        _color: red;                    /*IE6 以下*/
                        *color: red;                    /*only IE5 - IE7*/
                        #color: red;                    /*only IE5 - IE7*/
                        +color: red;                    /*IE7 以下*/
                        color: red\9;                   /*only IE5 - IE10*/
                        color/*\**/: red\9;             /*only IE5 - IE10*/
                        color/**/: red;                 /*IE5 以上*/
                        color: red\0/;                  /*IE8 以上*/
                        color: red\0;                   /*IE8 以上*/
                        :root span { color: red; }      /*IE9以上*/

IE 測試 - 如果 Hack 成功變紅色

_color: red;
*color: red;
#color: red;
+color: red;
color: red\9;
color/*\**/: red\9;
color/**/: red;
color: red\0/;
color: red\0;

Hack 載入的 CSS

                    *color: red; _color: black;                /*only IE7*/
                    #color: red; _color: black;                /*only IE7*/
                    color: red\9; *color: black;               /*only IE7 & IE8 & IE9 & IE10*/
                    color: red\9; #color: black;               /*only IE7 & IE8 & IE9 & IE10*/
                    color/*\**/: red\9; *color: black;         /*only IE7 & IE8 & IE9 & IE10*/
                    color/*\**/: red\9; #color: black;         /*only IE7 & IE8 & IE9 & IE10*/
                    color: red\9; *color: black;               /*only IE8 & IE9 & IE10*/
                    color: red\9; #color: black;               /*only IE8 & IE9 & IE10*/
                    color/*\**/: red\9; *color: black;         /*only IE8 & IE9 & IE10*/
                    color/*\**/: red\9; #color: black;         /*only IE8 & IE9 & IE10*/
                    color/**/: red; color: black\9;            /*IE11 以上*/
                    color/**/: red; color/*\**/: black\9;      /*IE11 以上*/
                    color: red\0/; color: black\9;             /*IE11 以上*/
                    color: red\0/; color/*\**/: black\9;       /*IE11 以上*/

IE 測試 - 如果 Hack 成功變紅色

*color: red; _color: black;
#color: red; _color: black;
color: red\9; *color: black;
color: red\9; #color: black;
color/*\**/: red\9; *color: black;
color/*\**/: red\9; #color: black;
color: red\9; *color: black;
color: red\9; #color: black;
color/*\**/: red\9; *color: black;
color/*\**/: red\9; #color: black;
color/**/: red; color: black\9;
color/**/: red; color/*\**/: black\9;
color: red\0/; color: black\9;
color: red\0/; color/*\**/: black\9;

Hack CSS（針對 Firefox）

                    @-moz-document url-prefix() { 
                        #firefox { color: orange; }
                    }

Firefox 測試 - 如果 Hack 成功變橘色

@-moz-document url-prefix()

Hack CSS（針對 Chrome 和 Safari）

                    @media screen and (-webkit-min-device-pixel-ratio:0){ 
                        #chrome_safari { color: blue; } 
                    }

Chrome 和 Safari 測試 - 如果 Hack 成功變藍色

@media screen and (-webkit-min-device-pixel-ratio:0)

Hack CSS（針對 Opera）

                    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
                        head~body #opera { color: green; }
                    }

Opera 測試 - 如果 Hack 成功變綠色

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)

DEMO MEMO