针对IE浏览器的CSS样式（兼容性）

时间 2019-11-18

原文原文链接

1. IE hacks:css

"_"  是IE6 专有的hack;
"\9" 对IE6-IE10都有效；
"\0"对IE8-IE10都有效；
"\9\0"对IE9-IE10都有效；

优势:html

CSS hacks 内嵌在普通的 CSS 里面，不会产生更多 HTTP 请求。CSS hacks 内嵌在普通的 CSS 里面，编写时比较方便。浏览器

缺点:spa

　　它是不标准的产物。内嵌在其余 CSS 中，不便维护。尤为是当 hacks 的数量比较多的时候维护简直是个恶梦。内嵌在其余 CSS 中，即便在非 IE 浏览器中也会被加载，浪费资源。code

2.条件注释 CSS:htm

<!--[if IE 6 ]>
　　　< link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
< ![endif]-->

<!--[if lte IE 8 ]> 
　　 <link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" /> 
<![endif]-->

条件注释是一种 IE 专有的、对常规（X）HTML 注释的 Miscrosoft 扩展。从 W3C 标准来讲，它也是不标准的产物，但它是微软官方推出的针对 IE 进行开发的方式，blog

　　而且条件注释对于其余全部浏览器做为常规注释出现，所以对其余浏览器无害
资源

优势：开发

　　条件注释 CSS 的好处是在独立的 CSS 文件中编写，能准确控制在特定的 IE 中加载，不会形成资源浪费，而且便于维护。class

缺点：

就是会产生多余的 HTTP 请求，尤为是当你须要兼容的 IE 版本不少的时候，你就须要产生多个 HTTP 请求，这对于原本通道数目就少的低版本 IE 来讲无疑会影响页面加载速度。

　　　　　　　　　　　　　　　　　　　　　　以上两种方法不是很好，如下的方法相对来讲会好点；

3.条件注释 html 标签：

　　这种方案也是利用条件注释，但并非对 CSS 使用条件注释，而是对 html 标签使用条件注释，引入不一样的 class ，从而区分不一样的 IE 以及其余浏览器；

<!DOCTYPE html>  
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->

　　而后把对特定 IE 的 CSS 加上相应的 class 并写在普通 CSS 文件里便可: .ie6 .header .nav {margin:0 0 0 ;padding:0 0 0 0; }

　　优势：

　　　　条件注释表达式的好处在于不会产生多余的 HTTP 请求；

　　缺点：

　　　　因为这些针对特定 IE 的 CSS 与普通的 CSS 放在一块儿，即不是相应的 IE 也会被加载，所以若是 CSS 数目比较多的话就会像使用 hacks 那样，形成浪费；

　　　　　　　　　　　　　　　　　　　　　　以上方法：须要根据具体状况选择方法。