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

悠悠 2022-04-12 05:26 429阅读 0赞

先说说遇到的问题：  
项目代码中用到了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用自己默认的样式吧，判断如下：

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”;  
    \}  
    \}