日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
CSSHack技術解決多瀏覽器兼容問題

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

成都創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)綿陽服務器托管報價，主機托管價格性價比高，為金融證券行業(yè)服務器托管，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

CSS Hack技巧匯總

CSS Hack簡介

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

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

 
 
 
    
  
  
  
  1. 我來自Opera7.2-9.5
     
    2.   
  
  
  2. 我是神奇的Safari
     
    3.   
  
  
  3. 我來自Firefox
     
    4.   
  
  
  4. 我是FF前輩Firefox1-2
     
    5.   
  
  
  5. 我是IE7
     
    6.   
  
  
  6. 我是殘品IE6
     
    7.   
  
  
  7.  
    8.

然后我讓這些P標簽默認都不顯示

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. bodyp{display:none;}  
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.

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

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.

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

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

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

CSS Hack區(qū)分Firefox

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

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

CSS Hack區(qū)分Safari

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

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

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

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

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

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

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


名稱欄目：CSSHack技術解決多瀏覽器兼容問題
網頁URL：http://www.dlmjj.cn/article/djijipi.html