使用条件注释完成浏览器兼容

最近做的纯PC站需要兼容到IE8，一般使用css hack就能够完成，但如果兼容到IE7及以下就很头疼了，使用条件注释动态加载脚本是个不错的选择。

注释不同的浏览器版本：

(1)、支持所有的IE浏览器（不包括IE10标准模式）

(2)、所有非IE浏览器（不包括IE10标准模式）

只有非IE浏览器显示(不包括IE10)

(3)、IE10浏览器

目前还没有找到该版本浏览器的像<!--[if IE 9]>似的单独注释，但IE10做得很不错了，就单单布局而言，页面在IE10、FireFox、Chrome上的表现已经没有什么区别了。

(4)、IE9浏览器

(5)、IE8浏览器

(6)、IE7浏览器

(7)、IE6浏览器

(8)、IE10以下版本浏览器(不包括IE10)

(9)、IE9及IE9以下版本浏览器(包括IE9)

(10)、IE6以上版本浏览器(不含IE6)

(11)、IE7及IE7以上版本浏览器

1.动态加载样式表。

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->

2. 动态加载样式

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><style type="text/css" media="screen">body{height: 700px;}.ie6{background: #ff0;}.ie7{background: #f00;}.ie8{background: #f0f;}.ie9{background: #00f;}.chrome{background: #000;}</style>
</head>
<!--[if !IE]><!--><body class="chrome" lang="zh-cn"><!--><![endif]-->
<!--[if lt IE 7 ]><body class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><body class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><body class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><body class="ie9" lang="zh-cn"><![endif]-->  </body>
</html>

3. 附常用条件注释

<!--[if IE]>只有IE6,7,8,9浏览器显示(IE10标准模式不支持)<hr/><![endif]-->
<!--[if !IE]><!-->只有非IE浏览器显示(不包括IE10)<hr/><!--><![endif]-->
<!--[if IE 9]>IE9浏览器显示<hr/><![endif]-->
<!--[if IE 8]>IE8浏览器显示<hr/><![endif]-->
<!--[if IE 7]>IE7浏览器显示<hr/><![endif]-->
<!--[if IE 6]>IE6浏览器显示<hr/><![endif]-->
<!--[if lt IE 10]>IE10以下版本浏览器显示(不包括IE10)<hr/><![endif]-->
<!--[if lte IE 9]>IE9及IE9以下版本浏览器显示(包括IE9)<hr/><![endif]-->
<!--[if gt IE 6]>IE6以上版本浏览器显示(不含IE6)<hr/><![endif]-->
<!--[if gte IE 7]>IE7及IE7以上版本浏览器显示(包含IE7)<hr/><![endif]-->

转载于:https://www.cnblogs.com/pomelott/p/6939931.html

使用条件注释完成浏览器兼容相关推荐

条件注释判断浏览器!--[if !IE]!--[if IE]!--[if lt IE 6]!--[if gte IE 6]
条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]> <!- ...
条件注释判断浏览器版本!--[if lt IE 9]
 除IE外都可识别  <!--[if IE]> 所有的IE可识别 <![ ...
条件注释判断浏览器版本!--[if lt IE 9]（转载）
 除IE外都可识别  <!--[if IE]> 所有的IE可识别 <![ ...
关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
有关css和js针对不同浏览器兼容的问题
首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要工具,比如firefox.theworld.maxth ...
CSS浏览器兼容问题集-第四部分
12.FireFox下如何使连续长字段自动换行众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 <style type=&qu ...
CSS浏览器兼容汇总
原文:http://www.52css.com/article.asp?id=1026 从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下. 对于web2.0的过度,请尽量用xhtml ...
div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...)
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
js浏览器兼容问题总结及解决办法
javascript部分 document.form.item 问题问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在F ...

使用条件注释完成浏览器兼容

使用条件注释完成浏览器兼容相关推荐

最新文章

热门文章