css hack總結

時間 2019-11-13

標籤 css hack 總結欄目 CSS 简体版

原文原文鏈接

　　雖說，如今討論css hanck已通過時了，不過了解下仍是好的。css

各遊覽器經常使用兼容標記一覽表:html

標記	IE6	IE7	IE8	FF	Opera	Sarari
[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}	X	X	X	X	X	√
.bb , x:-moz-any-link, x:default	X	√	X	√(ff3.5及如下)	X	X
@-moz-document url-prefix(){.bb{}}	X	X	X	√	X	X
@media all and (min-width: 0px){.bb {}}	X	X	X	√	√	√
* +html .bb {}	X	√	X	X	X	X
遊覽器內核	Trident	Trident	Trident	Gecko	Presto	WebKit

（以上 .bb 可更換爲其它樣式名）

注意點：web
網上不少資料中經常把!important也做爲一個hack手段，其實這是一個誤區。!important經常被咱們用來更改樣式，而不是兼容hack。形成這個誤區的緣由是IE6在某些狀況下不主動識別!important,以致於經常被人誤用作識別IE6的hack。但是，你們注意一下，IE6只是在某些狀況下不識別（ie6下，同一個大括號裏對同一個樣式屬性定義，其中一個加important 則important標記是被忽略的，例：{background:red!important; background:green;} ie6下解釋爲背景色green，其它瀏覽器解釋爲背景色red；若是這同一個樣式在不一樣大括號裏定義，其中一個加important 則important發揮正常做用，例：div{background:red!important} div{background:green}，這時全部瀏覽器統一解釋爲背景色red。）瀏覽器
實例講解：
Hack應用情境（一）ide
適用範圍：IE:6.0,IE7.0,IE8.0之間的兼容ui
實例說明：url
此例中咱們使用了漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，此時，咱們的IE8已經獨立識別。
實例代碼：spa
.bb{
height:32px;
/*全部識別*/
. /*IE六、七、8識別*/
+/*IE六、7識別*/
_/*IE6識別*/
}
firefox

/*一個用於展現的class爲bb的div標籤*/rest
< div class ="bb"></ div >

Hack應用情境（二）
適用範圍：IE:6.0,IE7.0,IE8.0,Firefox之間的兼容
實例說明：
你們很容易的能夠看出這是情境（一）的增強版，適用於更普遍的環境。其實情境（一）中也已經作到了把火狐與IE遊覽器區分開來了，如今咱們要作的是把火狐從其它遊覽器中再次識別出來。你們仔細看下代碼，你們會發現其實遊覽器識別是很簡單的。火狐如何識別？對了，IE中對僞類支持不普遍，因此僞類是個不錯的途徑。(.yourClass,x:-moz-any-link, x:default)注意，這個區分僞類每每IE7也能識別，因此最好還須要把IE7單獨識別出來，且此方法對ff3.6 已無效，firefox的區分可使用@-moz-document url-prefix(){}
實例代碼：
.bb{
height:32px;
/*全部識別*/
/*IE六、七、8識別*/
+/*IE六、7識別*/
_/*IE6識別*/
}
.bb, x:-moz-any-link, x:default{}/*IE7 firefox3.5及如下識別 */
@-moz-document url-prefix(){.bb{}}/* 僅firefox 識別 */
* +html .bb{}/* 僅IE7 識別 */

/*一個用於展現的class爲bb的div標籤*/
< div class ="bb"></ div >

Hack應用情境（三）
適用範圍：IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之間的兼容
實例說明：
咱們如今將再次對咱們的CSS進行增強了，使其能識別Safari(Chrome)遊覽器。這是基於它們的內核webkit來識別的，用法爲@media screen and (-webkit-min-device-pixel-ratio:0)
實例代碼：
.bb{
height:32px;
/*全部識別*/
/*IE六、七、8識別*/
+/*IE六、7識別*/
_/*IE6識別*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{/*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{}/*IE7 firefox3.5及如下識別 */
@-moz-document url-prefix(){.bb{}}/*僅firefox 識別*/
* +html .bb{}/* 僅IE7 識別 */

/*一個用於展現的class爲bb的div標籤*/
< div class ="bb"></ div >

Hack應用情境（四）
適用範圍：IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome全兼容
實例說明：
實例的具體代碼在下面實例代碼中已經列出，具體效果如此頁面的頂端部分效果，您能夠經過不一樣遊覽器檢測該效果。此次咱們基本把全部的主流遊覽器都兼容了，你們來看下代碼。Opera的識別有一部分歸功於「\0」標記，這個標記只被IE8和Opera識別，特殊的標記每每造就的是咱們更普遍的hack手段。下例的代碼比較完整，你們能夠選擇參考。
實例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312"/>
<style type="text/css">
/***************************************** 各遊覽器兼容CSS **********************************************/
.bb{height:32px;/*全部識別*/ /*IE六、七、8識別*/ +/*IE六、7識別*/ _">/*IE6識別*/}

@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */
@media all and (min-width: 0px){ .bb{/*opera and Safari(Chrome) and firefox*/ }/* 僅 Opera 有效 */ }{}

.bb, x:-moz-any-link, x:default{/*IE七、Firefox3.5及如下識別 */}
@-moz-document url-prefix(){.bb{/*僅 Firefox 識別 */}}
* +html .bb{}/* 僅IE7 識別 */

/* 通常狀況下咱們區分IE7 只用 +background-color 配合 _background-color 就好了若是必須寫 .bb, x:-moz-any-link, x:default 這樣的代碼區分 Firefox3.5及如下則謹記此寫法對IE7也有效，故在其中要再重寫一次 +background-color 或者使用 * +html .bb{} 方法僅對 IE7 有效。可以使用 @-moz-document url-prefix(){} 方法獨立區分全部 firefox */

.browsers td{width:8%;text-align:center;padding:8px;}}
.browsercolor{color:#333;font-size:18px;font-weight:bold;}
.ie6{
.ie7{background-color:#a200ff}
.ie8{background-color:#00deff}
.firefox{background-color:#4eff00}
.opera{background-color:#4cac70}
.other{background-color:#f1ee18;}

#tipTable td,#tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}
#wordTable td{margin-left:8px;}
#firefoxTip{display:none;}
#firefoxTip, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及如下識別 */+display:none/*再區分一次IE7*/}
@-moz-document url-prefix(){#firefoxTip{display:block;/*僅 firefox 識別 */}}
#ChromeTip{display:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){#ChromeTip{display:block;}}{} /* safari(Chrome) 有效 */
@media all and (min-width: 0px){#ChromeTip{display:none\0;} /* 僅 Opera 有效 */ }{}
</style>
</head>
<body>
<table class="browsers" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>IE6</td>
<td></td>
<td>IE7</td>
<td></td>
<td>IE8</td>
<td></td>
<td>Firefox</td>
<td></td>
<td>Opera</td>
<td></td>
<td>Safari(Chrome)</td>
<td></td>
</tr>
<tr class="browsercolor">
<td class="ie6">IE6</td>
<td></td>
<td class="ie7">IE7</td>
<td></td>
<td class="ie8">IE8</td>
<td></td>
<td class="firefox">Firefox</td>
<td></td>
<td class="opera">Opera</td>
<td></td>
<td class="other">Safari(Chrome)</td>
<td></td>
</tr>
</table>
<div class="bb">
<span style="display:none;display:block\0;display:none\9;">Opera的辨別色是深綠色，Opera遊覽器很時髦麼。</span >
<span id="firefoxTip">Firefox的辨別色是淺綠色，Firefox是很強大的遊覽器。</span >
<span id="ChromeTip">Safari和Chrome的辨別色是金黃色，Safari和Chrome使用的都是Webkit內核</span >
</div>
</body>
</html>

1. CSS - Hack 總結
2. css hack hack
3. CSS Hack 彙總快查
4. CSS Hack彙總(轉載)
5. CSS之CSS hack
6. CSS Hack
7. CSS HACK
8. css hack
9. CSS hack
10. css HACK
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 算法總結-雙指針
• 算法總結-回溯法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。