html兼容浏览器的写法——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
html兼容浏览器的写法

发布作者:萧强   发布时间:2013-03-25   阅读次数:20723

<!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>

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

UI界面化设计

热点文章

新闻资讯

标签云

友情赞助