自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS Hack技術(shù)解決多瀏覽器兼容問題

作者：haiker
開發(fā) 前端
CSS Hack就是指我們?yōu)榱思嫒莞鳛g覽器，而使用的特別的CSS定義技巧，我們在用DIV+CSS制作網(wǎng)頁時，由于不同的瀏覽器，對CSS的支持及解析結(jié)果不一樣，得不到我們所需要的頁面效果。

本文向大家描述一下如何使用CSS Hack技巧解決DIV+CSS布局多瀏覽器兼容問題，針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack，相信本文介紹一定會讓你有所收獲。

CSS Hack技巧匯總

CSS Hack簡介

我們在用DIV+CSS制作網(wǎng)頁時，由于不同的瀏覽器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等對CSS的支持及解析結(jié)果不一樣，導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的CSS代碼的過程，就叫CSS Hack。

為了向你展示這些CSS Hack是否正常運作，我新建六個P標(biāo)簽，并給每一個P標(biāo)簽一個特有的id。這將向你展示CSS Hack的運作情況。

  1. <pidpid="opera">我來自O(shè)pera7.2-9.5</p> 
  2. <pidpid="safari">我是神奇的Safari</p> 
  3. <pidpid="firefox">我來自Firefox</p> 
  4. <pidpid="firefox12">我是FF前輩Firefox1-2</p> 
  5. <pidpid="ie7">我是IE7</p> 
  6. <pidpid="ie6">我是殘品IE6</p> 
  7.  

然后我讓這些P標(biāo)簽?zāi)J(rèn)都不顯示

  1. <styletypestyletype="text/css"> 
  2. bodyp{display:none;}  
  3. </style> 
  4.  

使用IE CSS條件注釋區(qū)分IE瀏覽器

最簡單的區(qū)分IE瀏覽器的方法自然是使用他們的條件注釋。微軟創(chuàng)建了一個強大的語法來讓我們?nèi)崿F(xiàn)這個功能。我不想再詳細(xì)地介紹IE條件注釋了，我想你在搜索引擎能搜索到上萬個搜索條目，我這里只要這兩個：

  1. <!--[ifIE7]> 
  2. <styletypestyletype="text/css"> 
  3. </style> 
  4. <![endif]--> 
  5.  
  6. <!--[ifIE6]> 
  7. <styletypestyletype="text/css"> 
  8. </style> 
  9. <![endif]--> 

#p#使用CSS解析器Hacks區(qū)分IE

雖說IE條件注釋十分簡單好用，但是如果你想把全部的CSS放到一個文件里的話，那么你不得不使用別的方法。注意這里的IE7Hack將只對IE7有效，因為IE6根本不知道>選擇符。同時你也得注意>選擇符對于其他瀏覽器同樣是無效的。

  1. /*IE7*/  
  2. html>body#ie7  
  3. {*display:block;}  
  4.  
  5. /*IE6*/  
  6. body#ie6  
  7. {_display:block;}  
  8.  

CSS Hack區(qū)分Firefox

***個使用了body:empty來區(qū)分Firefox1和2。第二個hack使用了全部Firefox瀏覽器的專有擴展-moz。-moz只對Firefox有效，使用這個Hack大可不必?fù)?dān)心其他瀏覽器的影響。

  1. /*Firefox1-2*/  
  2. body:empty#firefox12  
  3. {display:block;}  
  4.  
  5. /*Firefox*/  
  6. @-moz-documenturl-prefix()  
  7. {#firefox{display:block;}}  

CSS Hack區(qū)分Safari

Safari的CSS Hack與Firefox的hack看起來很像，使用的是Safari瀏覽器的專有擴展-webkit且只對Safari瀏覽器有效。

  1. /*Safari*/  
  2. @mediascreenand(-webkit-min-device-pixel-ratio:0)  
  3. {#safari{display:block;}}  
  4.  

 #p#CSS Hack區(qū)分Opera

  1. /*Opera*/  
  2. @mediaalland(-webkit-min-device-pixel-ratio:10000),  
  3. notalland(-webkit-min-device-pixel-ratio:0)  
  4. {head~body#opera{display:block;}}  
  5.  

然后，全部合在一起便是完整代碼：

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"  
  2.  
  3. "http://www.w3.org/TR/html4/strict.dtd"> 
  4. <htmllanghtmllang="en"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"> 
  7. <title>CSSBrowserHacks</title> 
  8. <styletypestyletype="text/css"> 
  9. bodyp  
  10. {  
  11. display:none;  
  12. }  
  13. /*Opera*/  
  14. html:first-child#opera  
  15. {  
  16. display:block;  
  17. }  
  18. /*IE7*/  
  19. html>body#ie7  
  20. {  
  21. *display:block;  
  22. }  
  23. /*IE6*/  
  24. body#ie6  
  25. {  
  26. _display:block;  
  27. }  
  28. /*Firefox1-2*/  
  29. body:empty#firefox12  
  30. {  
  31. display:block;  
  32. }  
  33. /*Firefox*/  
  34. @-moz-documenturl-prefix()  
  35. {  
  36. #firefox{display:block;}  
  37. }  
  38. /*Safari*/  
  39. @mediascreenand(-webkit-min-device-pixel-ratio:0)  
  40. {  
  41. #safari{display:block;}  
  42. }  
  43. /*Opera*/  
  44. @mediaalland(-webkit-min-device-pixel-ratio:10000),  
  45. notalland(-webkit-min-device-pixel-ratio:0)  
  46. {  
  47. head~body#opera{display:block;}  
  48. }  
  49. </style> 
  50. </head> 
  51.  
  52. <body> 
  53. <pidpid="opera">我來自O(shè)pera7.2-9.5</p> 
  54. <pidpid="safari">我是神奇的Safari</p> 
  55. <pidpid="firefox">我來自Firefox</p> 
  56. <pidpid="firefox12">我是FF前輩Firefox1-2</p> 
  57. <pidpid="ie7">我是囧IE7</p> 
  58. <pidpid="ie6">我是殘品IE6</p></body> 
  59. </html> 
  60.  

 CSS Hack雖好且方便兼容各瀏覽器，但是通不過W3C驗證，所以還得自己權(quán)衡是否有必要去使用。

【編輯推薦】

  1. 兼容IE6,IE7,IE8,Firefox的CSS HACK寫法
  2. CSS display:inline和float:left兩者區(qū)別
  3. CSS HACK區(qū)別IE6、IE7、IE8、Firefox兼容性
  4. JS在IE和Firefox兼容性問題及解決方案
  5. IE8瀏覽器中正式版CSS hack技術(shù)用法

 

責(zé)任編輯：佚名 來源： javaeye.com
CSS Hack
相關(guān)推薦

2010-08-30 15:40:31

CSS瀏覽器兼容

2010-08-11 13:35:10

JavaScriptCSS

2010-09-15 09:43:24

Javascript瀏覽器兼容

2010-10-09 13:07:51

Javascript兼容

2016-09-18 20:48:21

蘋果safari瀏覽器

2010-09-15 16:19:17

IECSS hack

2010-09-15 15:39:03

CSS hack

2024-12-25 15:59:04

2013-01-21 15:33:30

瀏覽器

2015-06-12 11:26:02

CSS瀏覽器 CSS Hac

2011-04-12 16:51:29

Javascript兼容性

2010-09-15 16:29:20

CSS hackIE8

2010-09-15 16:48:51

IE8CSS hack

2009-04-02 18:06:27

Vmwareesx虛擬化

2013-03-12 10:01:21

WebCSSJS

2010-08-17 16:27:52

IE6IE7IE8

2010-09-02 09:21:45

CSS兼容

2010-08-18 14:21:48

FirefoxIE7IE6

2009-02-20 15:24:00

IE8火狐瀏覽器

2010-09-08 11:11:50

CSS樣式CSS
點贊
收藏

51CTO技術(shù)棧公眾號