CSS hack（歡迎補充）
**CSS hack定義：css
因爲不一樣的瀏覽器，好比IE6,IE7,IE8,Mozilla,FireFox,Chrome，Opera和Safari等瀏覽器對CSS的解析認識不同html
1.IE條件註釋法**web
<!--[if IE 6]> CSS內容 <![endif]--> <!--[if lt IE 7]><!--您的代碼--><![endif]-->
2.選擇符前綴法chrome
"*html"前綴最對IE6有效 "*+html"前綴只對IE7有效
3.樣式屬性前綴法瀏覽器
"_"只在IE6下生效 "_*"在IE6和IE7生效
<style> .test{width:80px;width:70px;*width:60px} </style>app
各瀏覽器CSS hack兼容表：less
IE6 IE7 IE8 IE9 FireFox Chrome safari opera 「!important」 Y Y Y 「_」 Y 「*」 Y Y "+」 Y 「/**/」 Y Y Y Y Y Y Y 「/*\**/」 Y Y 「\9\0」 Y "\9" Y Y Y Y 「:root」 Y Y Y 「nth-of-type(1)」 Y Y Y 「[;屬性：屬性值;];」 Y
3.CSS內部hack
CSS內部hack包括："*"、"_"、"+"、"\0"、"\9"、"\9\0"、"!important"、"[;屬性:屬性值;];"、"/**/"、"/***/"等。
用法：佈局
IE6:_屬性名:屬性值;如：_color:red;
IE六、7:*屬性名:屬性值;如：*color:red;
IE7:+屬性名:屬性值;如：+color:red;
IE七、8:屬性名/***/:屬性值\9;如：color/***/:red\9;
IE八、9:屬性名:屬性值\0;如：color:red\0;
IE9:屬性名:屬性值\9\0;如：color:red\9\0;
All IE:屬性名:屬性值\9;如：color:red\9;
IE七、FireFox、Chrome:屬性名:屬性值 !important;如：color:red !important;
Chrome、safari:[;屬性名:屬性值;];;如：[;color:red;];,方括號內外的三個「；」不能去掉;
except IE6:屬性名://屬性值;如：color://red;
all browser:屬性名:屬性值，如：color:red;ui
4.選擇器hack
用法：
IE6:html 選擇符{屬性名：屬性值；}，如：html p{font-size:30px;}url
IE7:*+html 選擇符{屬性名：屬性值；}，如：*+html p{font-size:30px;}
IE7:html* 選擇符{屬性名：屬性值；}，如：html* p{font-size:30px;}
IE7:*:first-child+html 選擇符{屬性名：屬性值；}，如：*:first-child+html p{font-size:30px;}
IE八、FF、Chrome:選擇符{屬性名：屬性值/},如：p{font-size:30px;/}
IE8+和非IE:選擇符:lang(zh-cn){屬性名:屬性值;}，如：p:lang(zh-cn){font-size:30px;}
IE9+和非IE：選擇符:nth-child(1){屬性名:屬性值;},如：p:nth-child(1){font-size:30px;}
IE9::root 選擇符{屬性名：屬性值\9；}，如：:root p{font-size:30px\9;}
FireFox only. 1+:選擇符, x:-moz-any-link{屬性名：屬性值}，如：p,x:-moz-any-link{font-size:30px;}
FireFox 3.0+:選擇符,x:-moz-any-link,x:default{屬性名：屬性值；}，如：p,x:-moz-any-link,x:default{font-size:30px;}
FireFox:@moz-document url-prefix(){選擇符{屬性名：屬性值；}}，如：
@-moz-document url-prefix(){body{background-color:pink;}}
IE 9/10, FireFox 3.5+, Opera:@media screen and (min-resolution: +72dpi){選擇符{屬性名：屬性值；}},如：
@media screen and (min-resolution:+72dpi){p{font-size:30px;}}
Chrome、Safari:@media screen and (-webkit-min-device-pixel-ratio:0){選擇符{屬性名：屬性值；}}，如：
@media screen and (-webkit-min-device-pixel-ratio:0){body{background-color:yellow;}}
Chrome、Safari:選擇符{(-bracket-:hack;color:red;);},如：p{(-bracket-:hack;color:red;);},其中的圓括號能夠換成方括號
Safari 2 - 3.1:html[xmlns*=""]:root 選擇符{屬性名：屬性值；}，如:html[xmlns*=""]:root p{font-size:30px;}
Safari 2-3:html[xmlns*=""] body:last-child 選擇符{屬性名：屬性值；}，如：html[xmlns*=""] body:last-child p{font-size：30px;}
Safari 2 - 3.1, Opera 9.25:*|html[xmlns*=""] 選擇符{屬性名：屬性值；},如：*|html[xmlns*=""] p{font-size:30px;}
safari 3+, chrome 1+, opera9+, ff 3.5+:body:nth-of-type(1) 選擇符{屬性名：屬性值；}，如：body:nth-of-type(1) p{font-size:30px;}
safari 3+, chrome 1+, opera9+, ff 3.5+:body:first-of-type 選擇符{屬性名：屬性值；}，如：body:first-of-type p{font-size:30px;}
Opera 9.27 and below, safari 2:html:first-child 選擇符{屬性名：屬性值；}，如：html:first-child p{font-size:30px;}
Opera:@media all and (min-width:0){選擇符{屬性名：屬性值\0；}}，若是不加\0,ff、chrome、safari也都認識。如：
@media all and (min-width:0){body{background-color:gray\0;}}
Opera:@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){選擇符{屬性名：屬性值；}}，如：
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){body{background-color:red；}}
IE九、FireFox、Chrome、Safari、Opera：@media all and (min-width:0){選擇符{屬性名：屬性值；}},如：
@media all and (min-width:0){body{background-color:red;}}
IE九、FireFox、Chrome、Safari、Opera: :root *> 選擇符{屬性名：屬性值；},如：:root *> p{font-size:30px;}
IE八、IE九、FireFox、Chrome、Safari、Opera：html>/**/body 選擇符{屬性名：屬性值；},如：
html>/**/body p{background-color:red;}
IE七、IE八、IE九、FireFox、Chrome、Safari、Opera：html>body 選擇符{屬性名：屬性值；},如：
html>body p{background-color:red;}
IE:@media \0screen{選擇符{屬性名：屬性值}}，如：@media \0screen{p{font-size:30px;}}
iPhone：@media screen and (max-device-width:480px){選擇符{屬性名：屬性值；}},如：
@media screen and (max-device-width:480px){body{background-color：red；}}
5.IE條件註釋
A.簡介
IE中的條件註釋（Conditional comments）對IE的版本和IE非IE有優秀的區分能力，是WEB設計中經常使用的hack方法。
條件註釋只能用於IE5以上。若是你安裝了多個IE，條件註釋將會以最高版本的IE爲標準。
條件註釋的基本結構和HTML的註釋(<!– –>)是同樣的。所以IE之外的瀏覽器將會把它們看做是普通的註釋而徹底忽略它們。
IE將會根據if條件來判斷是否如解析普通的頁面內容同樣解析條件註釋裏的內容。
B.屬性
gt : greater than，選擇條件版本以上版本，不包含條件版本
lt : less than，選擇條件版本如下版本，不包含條件版本
gte : greater than or equal，選擇條件版本以上版本，包含條件版本
lte : less than or equal，選擇條件版本如下版本，包含條件版本
! : 選擇條件版本之外全部版本，不管高低
C.使用方法
注意把代碼中的<>換成英文中相應的大於或小於號
下面的代碼是在非IE瀏覽器下運行的條件註釋
您使用不是 Internet Explorer
您正在使用Internet Explorer version 6或者 一個非IE 瀏覽器
D.例子
<!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">
<head>
<title>演示: 區分 IE6 / IE7 /IE8 /FireFox</title>
<style>
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;
color:blue;
color:brown\9;
+color:red;
_color:green;
color:blue !important;
}
</style>
</head>
<body>
<p class="ie">
<span style="display:block;display:none\9;">嘿嘿，小子居然也用FireFox，藍色文字。</span>
<!--[if IE 8]>不錯不錯，挺先進的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，紅色文字！<![endif]-->
<!--[if IE 6]>孩子，雖然顯示的是綠色文字，不過，IE6可不是好東西呢！<![endif]-->
</p>
</body>
</html>
在不一樣的版本的IE瀏覽器中，<span>標籤中的文字表現不一樣。
6.FF和IE
（1）DOCTYPE 影響 CSS 處理;
HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
（2）FF: div 設置 margin爲auto時居中, IE 不行;若是想用使整個頁面要居中，建議不要套在一個DIV裏，能夠拆出多個div並在每一個拆出的div裏定義margin: auto；
（3）FF: 設置 padding 後,div會增長height和width,IE各個版本的瀏覽器中也有相似的現象,可用 !important 爲 FF 特別設置樣式；
（4）div 的垂直居中問題: vertical-align:middle; line-height和height值相同纔會垂直居中,缺點是要控制內容不要換行；
（5）cursor: pointer能夠同時在IE、FF中顯示遊標手指狀， hand僅IE能夠；
（6）FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯
示錯位, 若不設 height, 能夠在 menubar 中插入一個空格；
（7）ul標籤在FF中默認是有list-style和padding，因此最好事先聲明, 以免沒必要要的麻煩；而在IE中只有margin有值因此先定義ul{margin:0;padding:0;}就能解決大部分問題；
（8）做爲外部wrapper的div不要定死高度,最好還加上overflow:hidden，以達到高度自適應;
（9）左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距，
CSS樣式：
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關鍵}
HTML代碼：
（10）兼容IE7，不大量修改現有代碼又能在IE8中正常使用，微軟聲稱，添加<meta http-equiv="x-ua-compatible" content="ie=7" />就行。
7.注意事項
（1）float的div必定要閉合；
例如：(其中floatA、floatB的屬性已經設置爲float:left;)
<div id=」floatA」 ></div>
<div id=」floatB」 ></div>
<div id=」NOTfloatC」 ></div>
這裏的NOTfloatC並不但願繼續平移，而是但願往下排。這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float
標籤閉合。在<div class=」floatB」></div>和<div class=」NOTfloatC」></div>之間加上<div class=」clear」></div>，這個div必定要注意
聲明位置，必須與兩個具備float屬性的div同級並且之間不能存在嵌套關係，不然會產生異常。
而且將clear這種樣式定義爲爲以下便可：
.clear{clear:both;}
此外，爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden;
當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性用zoom:1;能夠作到，這樣就達到了兼容。
例如某一個wrapper以下定義：
.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}
（2）margin加倍的問題
設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裏面加上display:inline;
例如：<div id=」imfloat」></div>
相應的css爲:
#imfloat{
float:left;
margin:5px;/*IE下理解爲10px*/
display:inline;/*IE下再理解爲5px*/}
（3）關於容器的包涵關係
不少時候，尤爲是容器內有平行佈局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。必定要
用Photoshop或者Firework量取像素級的精度。
（4）關於高度的問題
若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，若是是靜態的內容，高度最好定好，彷佛有時候不會自動往下撐開.
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或padding 時。
例如：
CSS：
#box {background-color:#eee;}
#box p{margin-top: 20px;margin-bottom: 20px; text-align:center;}
HTML：
<div id="box">
<p>p對象中的內容</p>
</div>
解決方法：在p對象上下各加2個空的div對象，CSS代碼爲{height:0px;overflow:hidden;}或者爲div加上border屬性。
（5）屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)：p[id]{}，div[id]{}
這個對於IE6.0及如下的版本都隱藏,FF和OPera做用；屬性選擇器和子選擇器是有區別的,子選擇器的範圍從形式來講不如屬性選擇器的範圍大,
如p[id]中,全部p標籤中有id的都是一樣式的.
（6）IE捉迷藏的問題
當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實
在頁面。
解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬，頁面結構儘可能簡單。
（7）BOX解釋不一致
div{width:300px;margin:0 10px 0 10px;}
IE5下：div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px；
IE6和其餘瀏覽器：寬度是以300px+10px(右填充)+10px(左填充)=320px來計算的。
能夠作以下修改：
div{width:300px !important;width /**/:340px;margin:0 10px 0 10px}
這樣在各個瀏覽器中，這個div的寬度都是320px；
在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：
div{margin:30px !important;margin:28px;}注意這兩個margin的順序必定不能寫反，！important這個屬性IE不能識別，但別的瀏覽器能夠
識別。因此在IE下其實解釋成這樣：div{maring:30px;margin:28px}重複定義的話按照最後一個來執行，因此不能寫margin:XXpx! important。
8.如下兩種方法幾乎能解決現今全部HACK
（1）.!important，能區分FF和IE；
（2）.+html 與 *html是IE特有的標籤,firefox暫不支持.而+html又爲IE7特有標籤.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox /
*+html #wrapper { width: 60px;} / ie7 fixed/
*html #wrapper { width: 80px;} / ie6 fixed , 注意順序 /
}
</style>
當樣式寫在一塊兒時，順序通常是firefox、IE八、IE七、IE6，各個瀏覽器會根據它本身的狀況優先執行它所支持的css，而在頁面中呈現相應的效果。
注意:+html對IE7的HACK必須保證HTML頂部有以下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
9.瀏覽器專屬css hack
我來自 Opera 7.2 - 9.5
<p id="safari">我是神奇的 Safari</p>
<p id="firefox">我來自 FireFox</p>
<p id="firefox12">我是你爺爺 FireFox 1 - 2 </p>
<p id="ie7">我是囧 IE 7</p>
<p id="ie6">我是腦瘸 IE 6</p>
（1）使用IE CSS條件註釋區分IE瀏覽器
<!--[if IE 7]><style type="text/css"></style><![endif]-->
<!--[if IE 6]><style type="text/css"></style><![endif]-->
（2）使用CSS解析器Hacks區分IE
雖然說IE條件註釋十分簡單好用，可是若是你想把所有的CSS放到一個文件裏的話，那麼你不得不使用別的方法。注意這裏的IE7 Hack將只對IE7有效，
由於IE6根本不知道>選擇符。同時你也得注意>選擇符對於其餘瀏覽器一樣是無效的。
/*IE7*/：html > body #ie7{*display: block;}
/*IE6*/：body #ie6{_display: block;}
（3）CSS Hack區分FireFox
第一個使用了 body:empty來區分FireFox1和2 。
第二個 hack使用了所有FireFox瀏覽器的專有擴展-moz。-moz只對FireFox有效，使用這個Hack大可沒必要擔憂其餘瀏覽器的影響。
/*FireFox1-2*/：body:empty #firefox12{display: block;}
/*FireFox*/：@-moz-document url-prefix(){#firefox{display: block;}}
（4）CSS Hack區分Safari
Safari的CSS hack與FireFox的hack看起來很像，使用的是 Safari瀏覽器的專有擴展-webkit且只對Safari瀏覽器有效。
/*Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{#safari { display: block; }}
（5）CSS Hack區分Opera
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block; }}
更詳細的瀏覽器專屬css hack。
10.其餘
(1)min-width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確，但IE不認得min-這個定義，實際上它
把正常的width和height看成有min的狀況來使。若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE
下面根本等於沒有設置寬度和高度。
好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣：
#box{width:80px;height:35px;}
html>body #box{width:auto;height:auto;min-width:80px;min-height:35px;}
(2)在CSS樣式前加前綴來區分不一樣瀏覽器
在一些現有的css樣式前加上前綴，能夠區分出不一樣的瀏覽器。這幾種前綴以下：
-weikit:/Chrome Safari 3.1+/
-moz:/FireFox 3.5+/
-ms:/IE9/
-O:/Opera 10.50–12.00/ 用法： <style> p{ box-shadow:10px 10px 10px 10px #ffffff; -webkit-box-shadow:20px 20px 20px 20px #ffffff; -moz-box-shadow:30px 30px 30px 30px #ffffff; -ms-box-shadow:40px 40px 40px 40px #ffffff; -o-box-shadow:50px 50px 50px 50px #ffffff; } </style> 這樣就能在同一個css文件中來肯定同一頁面在不一樣瀏覽器表現出本身想要的效果。 注意：有些瀏覽器中必須先定義樣式，以後才能加前綴，如FF；而有些不用定義樣式就能夠，如Chrome。但瀏覽器中並非全部的樣式均可以這樣作，有些樣式是不支持的。 就像上面的例子，若是把box-shadow:10px 10px 10px 10px #ffffff;這一句註釋掉，在Chrome中沒有關係，但在FF中，特殊的陰影效果就顯示不出來了。
- 1. C++開源庫，歡迎補充。
- 2. 素材類網站 （歡迎補充）
- 3. yum安裝故障集（歡迎補充）
- 4. 前端IT攻城獅--網址蒐藏（-- 歡迎留言補充 --）
- 5. webpack使用優化（持續更新，歡迎補充）
- 6. 網站開發流程，我的心得，歡迎補充
- 7. React Native 常見問題(持續更新，歡迎補充)
- 8. winsows CMD及Linux命令大全 歡迎補充
- 9. Liunx運維基礎-資料連接（歡迎補充）
- 10. 各瀏覽器各版本User-agent彙總 歡迎補充
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記