解决select下拉箭头在IE中iframe下的兼容问题总结

先说说遇到的问题：
项目代码中用到了select下拉标签，要兼容Chrome、opera、IE等主流浏览器，其中IE要兼容到IE8版本，select的自带样式很不美观，所以样式选择了重写，下拉箭头引用设计的背景图片，代码类似如下：
select
{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
background: url(…/…/images/select_icon.png) 98% no-repeat;
}

select::-ms-expand { display: none; }//隐藏IE浏览器中select的下拉箭头
上面的代码在chrome、IE10&11中都能正常显示，但是在IE8、9中select::-ms-expand { display: none; }这行代码是不起作用的，它只兼容到IE10版本，这时在IE8、9中就会显示两个箭头，所以在运行的html中，添加了判断，如果为IE8、9，就让select用自己默认的样式吧，判断如下：

<!--[if lt IE 9]>
	<style type="text/css">
		select { padding: 0; height: auto; background: none; margin-bottom:5px;}
	</style>

<![endif]-->
<!--[if IE 9]>
	<style type="text/css">
		select { padding: 0 0px 0 12px;  background: none;}
	</style>
<![endif]-->

ok，现在运行项目在本地跑起来测试兼容性，高版本浏览器为自定义样式，IE8、9为默认样式，已达工作要求，本以为高枕无忧，BUT，问题来了，在生产环境中IE8的下拉箭头的图片并没有消失，WHY，明明在本地跑的好好的，仔细看代码后，发现是由于项目框架是用的iframe嵌套，而系统的一级框架中html的设置为
<meta http-equiv="X-UA-Compatible" content="IE=8">
iframe子页面中的设置为
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
我们的代码在子页面中，下拉箭头背景图片没有消失则表示 <!–[if lt IE 9]>没有生效，为什么没有生效呢，然后就去查iframe中IE兼容的知识，得到有用信息如下：

1. 在父窗口文档模式小于9的情况下：iframe中的页面可以指定自己的文档模式，但是最高不超过8。

2. 在文档模式为9/10的情况下：iframe中的页面自己指定文档模式无效，直接继承自父页面文档模式。

3. 不指定iframe中页面的文档模式的情况下：若父页面文档模式小于9，则iframe中页面的文档模式为8；若父页面文档模式大于8，iframe中页面的文档模式继承自父页面文档模式（第2条）。

4. 若父页面文档模式指定为7，iframe中页面不指定文档模式，iframe中页面的文档模式为8。

由第一条可知，客户只要打开IE8、9、10、11浏览器，就会默认用IE8的引擎来渲染页面，而我们的子页面设置为<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">，所以我们的页面应该也是用的IE8模式，那么，为什么 <!–[if lt IE 9]>（相当于<!–[if IE 8]>）里面的代码没有执行呢，我又去搜了下<!–[if IE 8]>的相关知识，得到如下信息：
IE自IE8开始区分浏览器模式与文档模式（早期叫文本模式），允许用户手动变更两个模式，也允许开发者通过 X-UA-Compatible 标记需要使用的文档模式，同时还提供了 document.documentMode 属性以供开发者判断正在使用的文档模式。由于文档模式决定了CSS和JS渲染引擎，当我们为兼容工作判断不同IE版本时，不需要通过 UA 判断，直接通过 document.documentMode 属性即可。
文档模式只代表当前使用的渲染内核，并不等于当前浏览器的真正版本。例如，当IE11模拟IE8时，文档模式返回结果会是8。
需要注意的是，文档模式决定了 if IE 条件注释会不会执行，如果文档模式是 8，那么 <!––[if IE 8]> 语句也会执行。
赶紧尝试用document.documentMode确定子页面的文档模式，but毫无反应，在前面加上parent、window等等也毫无作用，为什么用<!–[if IE 8]>这个方法不行呢，难道是因为用的IE11打开页面，一级框架默认IE8渲染后，子页面内分泌失调了吗？I don’t know
but，从上面的iframe信息中得知，它应该用的是IE8引擎，那么我只要用一个只有IE8能识别的css添加上去，把箭头背景图片隐藏不就ok了吗，搜了一下，得到结果如下：
/* 只支持IE6、7、8 */

@media \0screen{…}

尝试了下：@media \0screen{ background: none;}进入一级框架中测试，chrome等浏览器无影响，IE浏览器成功恢复默认select下拉箭头样式

总结一波

因为项目中有很多的公共代码，而且尽量不要修改JS代码，只修改css，中间想弄明白<!–[if IE 8]>失效原因，浪费了不少时间，但也获得了不少IE兼容的相关知识，现在总结一下吧！！

1. IE中iframe里文档模式，上文中已有，不再赘述；
2. @media \0screen{...}/* 只支持IE6、7、8 */
3. @media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {select{background: pink;}}/* 只支持IE10\11 */
4. -moz-appearance:none/button/…; /* Firefox /
   -webkit-appearance:none/button/…; / Safari 和 Chrome */ 修改默认样式
   5.条件注释判断浏览器版本
   如<!–[if IE 8]><!–[if IE 9]><!–[if !IE]>等等（具体网上搜）
   这种方法只兼容到IE9，IE10、11不兼容
   6.js判断是否为IE浏览器
   function isIE() {
   if (!!window.ActiveXObject || “ActiveXObject” in window)
   return true;
   else
   return false;
   }
   //判断浏览器类型
   function getweb(){
   if((!!window.ActiveXObject || “ActiveXObject” in window){
   return “IE”;
   }
   ifnavigator.userAgent.indexOf(“Firefox”)!=-1){
   return “Firefox”;
   }
   if(navigator.userAgent.indexOf(“Chrome”)!=-1){
   return “Chrome”;
   }
   if(navigator.userAgent.indexOf(“Safari”)!=-1){
   return “Safari”;
   }
   }