2. 程式人生 > >IE瀏覽器CSS hack方式一覽

IE瀏覽器CSS hack方式一覽

阿新 • • 發佈：2018-12-09

做前端多年，雖然不是經常需要hack，但是我們經常會遇到各瀏覽器表現不一致的情況。基於此，某些情況我們會極不情願的使用這個不太友好的方式來達到大家要求的頁面表現。我個人是不太推薦使用hack的，要知道一名好的前端，要儘可能不使用hack的情況下實現需求，做到較好的使用者體驗。可是啊，現實太殘酷，瀏覽器廠商之間歷史遺留的問題讓我們在目標需求下不得不向hack妥協，雖然這只是個別情況。今天，結合自己的經驗和理解，做了幾個demo把IE6~IE10和其他標準瀏覽器的CSS hack做一個總結，也許本文應該是目前最全面的hack總結了吧。

什麼是CSS hack

由於不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

CSS hack的原理

由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。

CSS hack分類

CSS Hack大致有3種表現形式，CSS屬性字首法、選擇器字首法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際專案中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

  • 屬性字首法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
  • 選擇器字首法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
  • IE條件註釋法(即HTML條件註釋Hack)：針對所有IE(注：IE10+已經不再支援條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效。

CSS hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。

CSS hack方式一：條件註釋法

這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例如下

	只在IE下生效
	<!--[if IE]>
	這段文字只在IE瀏覽器顯示
	<![endif]-->
	
	只在IE6下生效
	<!--[if IE 6]>
	這段文字只在IE6瀏覽器顯示
	<![endif]-->
	
	只在IE6以上版本生效
	<!--[if gte IE 6]>
	這段文字只在IE6以上(包括)版本IE瀏覽器顯示
	<![endif]-->
	
	只在IE8上不生效
	<!--[if ! IE 8]>
	這段文字在非IE8瀏覽器顯示
	<![endif]-->
	
	非IE瀏覽器生效
	<!--[if !IE]>
	這段文字只在非IE瀏覽器顯示
	<![endif]-->

CSS hack方式二：類內屬性字首法

屬性字首法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首，以達到預期的頁面展現效果。

IE瀏覽器各版本 CSS hack 對照表

hack 寫法 例項 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *color 青色 Y Y Y Y N Y N Y N Y
+ +color 綠色 Y Y Y Y N Y N Y N Y
- -color 黃色 Y Y N N N N N N N N
_ _color 藍色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y
\0 color:red\0 紅色 N N N N Y N Y N Y N
\9\0 color:red\9\0 粉色 N N N N N N Y N Y N
!important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y

說明：在標準模式中

  • “-″減號是IE6專有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  • “\9\0″ 只對IE9/IE10生效，是IE9/10的hack

demo如下

  1. <script type="text/javascript">

  2. //alert(document.compatMode);

  3. </script>

  4. <style type="text/css">

  5. body:nth-of-type(1) .iehack{

  6. color: #F00;/* 對Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，選擇器也適用幾乎全部Mobile/Linux/Mac browser*/

  7. }

  8. .demo1,.demo2,.demo3,.demo4{

  9. width:100px;

  10. height:100px;

  11. }

  12. .hack{

  13. /*demo1 */

  14. /*demo1 注意順序，否則IE6/7下可能無法正確顯示，導致結果顯示為白色背景*/

  15. background-color:red; /* All browsers */

  16. background-color:blue !important;/* All browsers but IE6 */

  17. *background-color:black; /* IE6, IE7 */

  18. +background-color:yellow;/* IE6, IE7*/

  19. background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */

  20. background-color:purple\0; /* IE8, IE9, IE10 */

  21. background-color:orange\9\0;/*IE9, IE10*/

  22. _background-color:green; /* Only works in IE6 */

  23. *+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */

  24. }

  25. /*可以通過javascript檢測IE10，然後給IE10的<html>標籤加上class=”ie10″ 這個類 */

  26. .ie10 #hack{

  27. color:red; /* Only works in IE10 */

  28. }

  29. /*demo2*/

  30. .iehack{

  31. /*該demo例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序

  32. IE6顯示為：綠色，

  33. IE7顯示為：黑色，

  34. IE8顯示為：紅色，

  35. IE9顯示為：藍色，

  36. Firefox/Chrome顯示為：橘色，

  37. （本例IE10效果同IE9,Opera最新版效果同IE8）

  38. */

  39. background-color:orange; /* all - for Firefox/Chrome */

  40. background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */

  41. background-color:blue\9\0; /* ie 9/10 - for ie9/10 */

  42. *background-color:black; /* ie 6/7 - for ie7 */

  43. _background-color:green; /* ie 6 - for ie6 */

  44. }

  45. /*demo3

  46. 例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序

  47. IE6顯示為：紅色，

  48. IE7顯示為：藍色，

  49. IE8顯示為：綠色，

  50. IE9顯示為：粉色，

  51. Firefox/Chrome顯示為：橘色，

  52. （本例IE10效果同IE9，Opera最新版效果也同IE9為粉色）

  53. */

  54. .element {

  55. background-color:orange; /* all IE/FF/CH/OP*/

  56. }

  57. .element {

  58. *background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */

  59. }

  60. .element {

  61. _background-color: red; /* IE6 */

  62. }

  63. .element {

  64. background-color: green\0; /* IE8+9+10 */

  65. }

  66. :root .element { background-color:pink\0; } /* IE9+10 */

  67. /*demo4*/

  68. /*

  69. 該例項是用於區分標準模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特別要注意順序

  70. IE6顯示為：橘色，

  71. IE7顯示為：粉色，

  72. IE8顯示為：黃色，

  73. IE9顯示為：紫色，

  74. IE10顯示為：綠色，

  75. Firefox顯示為：藍色，

  76. Opera顯示為：黑色，

  77. Safari/Chrome顯示為：灰色，

  78. */

  79. .hacktest{

  80. background-color:blue; /* 都識別，此處針對firefox */

  81. background-color:red\9; /*all ie*/

  82. background-color:yellow\0; /*for IE8/IE9/10 最新版opera也認識*/

  83. +background-color:pink; /*for ie6/7*/

  84. _background-color:orange; /*for ie6*/

  85. }

  86. @media screen and (min-width:0){

  87. .hacktest {background-color:black\0;} /*opera*/

  88. }

  89. @media screen and (min-width:0) {

  90. .hacktest { background-color:purple\9; }/* for IE9/IE10 PS:國外有些習慣常寫作\0，根本沒考慮Opera也認識\0的實際 */

  91. }

  92. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  93. .hacktest { background-color:green; } /* for IE10+ 此寫法可以適配到高對比度和預設模式，故可覆蓋所有ie10的模式 */

  94. }

  95. @media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/

  96. /* #963棕色 :root is for IE9/IE10, 優先順序高於@media, 慎用！如果二者合用，必要時在@media樣式加入 !important 才能區分IE9和IE10 */

  97. /*

  98. :root .hacktest { background-color:#963\9; }

  99. */

  100. </style>

demo1是測試不同IE瀏覽器下hack 的顯示效果 IE6顯示為：粉色， IE7顯示為：粉色， IE8顯示為：藍色， IE9顯示為：藍色， Firefox/Chrome/Opera顯示為：藍色， 若去掉其中的!important屬性定義，則IE6/7仍然是粉色，IE8是紫色，IE9/10為橙色，Firefox/Chrome變為紅色，Opera是紫色。是不是有些奇怪：除了IE6以外，其他所有的表現都符合我們的期待。那為何IE6表現的顏色不是_background-color:green;的綠色而是*+background-color:pink的粉色呢？其實是最後一句所謂的IE7私有hack惹的禍？不是說*+是IE7的專有hack嗎？？？錯，你可能太粗心了！我們常說的IE7專有*+hack的格式是*+html selector，而不是上面的直接在屬性上加*+字首。如果是為IE7定製特殊樣式，應該這樣使用：

*+html #ie7test { /* IE7 only*/
	color:green;
}

經過測試，我發現屬性字首*+background-color:pink;只有IE6和IE7認識。而*+html selector只有IE7認識。所以我們在使用時候一定要特別注意。

demo2例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序 IE6顯示為：綠色， IE7顯示為：黑色， IE8顯示為：紅色， IE9顯示為：藍色， Firefox/Chrome顯示為：橘色， （本例IE10效果同IE9,Opera最新版效果同IE8）

demo3例項也是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序 IE6顯示為：紅色， IE7顯示為：藍色， IE8顯示為：綠色， IE9顯示為：粉色， Firefox/Chrome顯示為：橘色， （本例IE10效果同IE9，Opera最新版效果也同IE9為粉色）

demo4例項是用於區分標準模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特別要注意順序 IE6顯示為：橘色， IE7顯示為：粉色， IE8顯示為：黃色， IE9顯示為：紫色， IE10顯示為：綠色， Firefox顯示為：藍色， Opera顯示為：黑色， Safari/Chrome顯示為：灰色，

CSS hack方式三：選擇器字首法

選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的字首進行hack。

目前最常見的是

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

結合CSS3的一些選擇器，如html:first-child，body:nth-of-type(1)，衍生出更多的hack方式，具體的可以參考下表：

CSS3選擇器結合JavaScript的Hack

我們用IE10進行舉例：

由於IE10使用者代理字串（UserAgent）為：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以我們可以使用javascript將此屬性新增到文件標籤中，再運用CSS3基本選擇器匹配。

JavaScript程式碼:

	var htmlObj = document.documentElement;
	htmlObj.setAttribute('data-useragent',navigator.userAgent);
	htmlObj.setAttribute('data-platform', navigator.platform );

CSS3匹配程式碼：

html[data-useragent*='MSIE 10.0'] #id {
	color: #F00;
}

CSS hack利弊

一般情況下，我們儘量避免使用CSS hack，但是有些情況為了顧及使用者體驗實現向下相容，不得已才使用hack。比如由於IE8及以下版本不支援CSS3,而我們的專案頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件註釋等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文件混亂不堪，增加管理和維護的負擔。相信只要大家一起努力，少用、慎用hack，未來一定會促使瀏覽器廠商的標準越來越趨於統一，順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack，必將減輕我們編碼的複雜度，少做無用功。

最後補上一張引自國外某大牛總結的CSS hack表，這時一張6年前的舊知識彙總表了，放在這裡僅供需要時候方便參考。

說明：本文測試環境為IE6~IE10，Chrome 29.0.1547.66 m，Firefox 20.0.1 ，Opera 12.02等。一邊工作，一邊總結，總結了幾天寫下整理好，今天把它分享出來，文中難免有紕漏，如大俠發現請及時告知！

轉載請註明來自CSDN freshlover的部落格專欄《史上最全CSS Hack方式一覽》

相關推薦

IE瀏覽器CSS hack方式一覽

做前端多年，雖然不是經常需要hack，但是我們經常會遇到各瀏覽器表現不一致的情況。基於此，某些情況我們會極不情願的使用這個不太友好的方式來達到大家要求的頁面表現。我個人是不太推薦使用hack的，要知道一名好的前端，要儘可能不使用hack的情況下實現需求，做到較好的使用者體驗。

史上最全的CSS hack方式一覽

做前端多年，雖然不是經常需要hack，但是我們經常會遇到各瀏覽器表現不一致的情況。基於此，某些情況我們會極不情願的使用這個不太友好的方式來達到大家要求的頁面表現。我個人是不太推薦使用hack的，要知道一名好的前端，要儘可能不使用hack的情況下實現需求，做到較好的使用者體驗。可是啊，現實太殘酷，瀏覽器廠商之

CSS： hack 方式一覽

慎用 -m opera red 技術分享 由於 term idt cin 本文引自：http://blog.csdn.net/freshlover/article/details/12132801 什麽是CSS hack 由於不同廠商的流覽器或某瀏覽器的不同版本（如IE

卸載完百度影音以後天氣助手還在，而且總是自己主動打開ie瀏覽器，解決方式

通過 -m == 第三方 post uninstall ria pan xms 今天暴風影音不好用了。我就安裝了百度影音，還有意外發現。相同的視頻，用百度影音看不清楚，然後我就直接卸載了。結果卸掉以天氣小助手還是在，而且總彈白色小框框，各種廣告。最

ie瀏覽器下get方式獲取數據無效問題

最好的 style mil ajax請求 ajax random font 時也 internet 在ie瀏覽器用get方式獲取數據時因為發送得到參數地址都是一樣的，所以瀏覽器會優先從緩存獲取數據，而不去服務器請求數據，post由於參數不同所以不會影響。 解決方法： 1.

IE瀏覽器通過ActiveX方式獲取客戶端IP地址

描述： 最近遇到一個需求，要進行日誌記錄，其中包含了IE瀏覽器客戶端IP地址的記錄。在嘗試了從request中獲取IP地址後，在沒有出現代理IP的情況下，可以正常獲取。即：區域網下，可以收集客戶端IP成功。但一旦出現代理IP的情況，就獲取不到我們正確的IP地址了。 分析： 方式一：從request中取I

認識hasLayout——IE瀏覽器css bug的一大罪惡根源 轉

什麼是hasLayout？hasLayout是IE特有的一個屬性。很多的ie下的css bug都與其息息相關。在ie中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值為true時，它負責對自己

【瀏覽器CSS hack大全】

什麼是CSS hack？ 由於不同廠商的流覽器或某瀏覽器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式

IE瀏覽器相容☞css hack

       ie瀏覽器的相容問題，各位前端的小夥伴肯定有不少，頭疼的記憶；目前w3c標準，對html5,css3都已經標準化，各大瀏覽器廠商也都對瀏覽器進行了升級改造；但是在某些行業，如國企，銀行，等一些傳統企業，依然再用IE8甚至更老的版本瀏覽器，而且

hack (瀏覽器兼容css hack）

red 瀏覽器兼容 條件 med screen 瀏覽器 min 註釋 分享 1.hack的原理 由於不同的瀏覽器對CSS的支持及解析結果不一樣，還由於CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。 CSS Hack大致有3種表現形式，CSS類

怎麽用css hack處理各瀏覽器兼容IE6，IE7,IE8,IE9/ FF

過濾 提醒 fire 混亂 不一致 rst 位置 兼容性問題 sina 第一：什麽事瀏覽器兼容性 　　瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中，做好瀏覽器兼容，才能夠讓網

Hack方式解決瀏覽器兼容

-- prefix dialog oot ati endif wid ide PE 一、瀏覽器內核簡介 　　Trident內核：IE，MaxThon，TT，The World，360，搜狗瀏覽器等 　　Gecko內核：Netscape6及以上版本，FF，MozillaSui

瀏覽器的兼容性（CSS瀏覽器兼容性、CSS hack）

zoom content 兼容性 line border orm only box 瀏覽器兼容 一、關於CSS hack（盡量不用或者少用，減少頁面復雜度） 　　1、條件註釋法：（我的測試是IE9及其以下才有效） 　　這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用

div css Firefox和IE瀏覽器相容問題 用CSS實現cellSpacing屬性效果

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

CSS hack IE常見相容性問題

1、hack是什麼？ Hack是基於開源的程式的基礎，對其程式碼進行增加、刪除或者修改、優化，使之在功能上符合新的需求。 2、css hack是什麼？ 不同的瀏覽器，對css樣式相容不同，css hack就是針對瀏覽器的不同，編寫不同的css樣式。 3.css相容方式 （1）瀏

瀏覽器css隱藏滾動條的方法！除了IE一般都支援

::-webkit-scrollbar { /* 滾動條整體部分 */ width:0px; margin-right:2px}::-webkit-scrollbar-track-piece { /*內層軌道，滾動條中間部分 */ background-color: white;} ::-webkit-sc

常用的CSS Hack技術集錦,瀏覽器核心

絕大多數的IE bug是因為haslayout  http://dwz.cn/4Elg7X 而haslayout是ie6~ie7的屬性，ie8已經廢棄。 幾個有用的連結:  CSS Hack Table    https://s

IE瀏覽器中Get請求方式有快取的問題

在前端專案開發中，會遇到一種很奇怪的情況，就是在IE瀏覽器中get請求方式在初次請求之後不再進行請求了，而是會從快取中獲取資料，但是chrome瀏覽器會中卻每次都會獲取。 ​ 自然的想到一個問題，就是get存在快取的問題！ 起源： ​ 常見的是ajax請求過一

css：IE瀏覽器相容常見的bug

IE瀏覽器相容常見的幾種bug： 1.沒有使用正確的doctype，應該正確宣告doctype。 2.各瀏覽器對不同標籤的初始值不同，需要進行css初始化。 下面有幾種css初始化示例程式碼： 雅虎工程師提供的CSS初始化示例程式碼 body,div,dl,dt,dd

常用瀏覽器相容問題 及css hack總結

由於市場上瀏覽器種類眾多，而不同瀏覽器其核心亦不盡相同，所以各個瀏覽器對網頁的解析就有一定出入，這也是導致瀏覽器相容問題出現的主要原因，我們的網頁需要在主流瀏覽器上正常執行，就需要做好瀏覽器相容。 使用Trident核心的瀏覽器：IE、Maxthon、TT；