html兼容ie瀏覽器的寫法


<!DOCTYPE HTML>
<!--[if !IE]><!--><html lang="zh-cn"><!--<![endif]-->
<!--[if gt IE 9]><html class="ie10" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie8 lte9 no-css3" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie7 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
<!--[if lte IE 6]><html class="ie6 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  
</body>
</html>

這個其實有好幾種不同的版本,按個人的需求來定吧,本人在不同階段也使用了不同的版本,最終確認為這個版本。其中.no-css3用來表示 ie6-8不支持css3的樣式,對於漸進增加方面,可以高級瀏覽器使用css3,ie6-8使用.no-css3這個class來定位使用背景圖片,而 對於ie8支持的:before和:after生成的三角,則可以使用.lt7來表示ie7及ie6使用背景圖片。

再次更新下,因為考慮到國內瀏覽器還是ie6比較多,所以把順序排列了下,然后只針對非ie6,7,8進行判斷

<!DOCTYPE HTML>
<!--[if lte IE 6]><html class="ie6 lte7 no-css3" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie8 no-css3" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie7 lte7 no-css3" lang="zh-cn"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  
</body>
</html>

2013-01-05更新:添加ie9,把no-css3 class改成lte8

<!DOCTYPE HTML>
<!--[if IE 6]><html class="ie6 lte9 lte8 lte7" lang="zh-cn"><![endif]-->
<!--[if IE 8]><html class="ie8 lte9 lte8" lang="zh-cn"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="zh-cn"><![endif]-->
<!--[if IE 7]><html class="ie7 lte9 lte8 lte7" lang="zh-cn"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9)  ]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

以上是網上轉發的,咱們實際使用中的可以考慮的更簡單

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="zh-cn"><!--<![endif]-->

這樣就可以了,例如當類a某個樣式在ie8上有問題時,就可以寫成

.ie8 .a{}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM