ie 9 select 下拉框 右侧 箭头

时间：2022-07-21 15:08:09

由于 不同浏览器的 select 选项的默认样式不同，为了样式统一性。

则 删去浏览器的默认样式

select.form-control {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  /*border: solid 1px #000;*/
 
  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
 
  /*在选择框的最右侧中间显示小箭头图片*/
  background-image: url("../icons/down.png");
  background-repeat: no-repeat;
  background-position: center right;
 /*background:red ;*/
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}

并同意修改为 background-image: url("../icons/down.png");

这样出现一个问题，在ie9 中 ，清除 select 的方法 不成功，依然存在 默认的下拉箭头。这样就导致两个箭头同时存在。

1、采用 ie9的hack 方式，添加 \9\0 后缀。

添加  background-image:none\9\0;

但是\9\0 后缀  ie10也支持，这就是 ie 比较恶心的一点。ie10 支持这种写法可以，但是 ie10 中 select 的 默认样式可以被清除，这样就导致 在ie10中 添加的箭头和默认的箭头都不存在。

 

2、采用 if IE endif  兼容模式，但是 除了ie 之外，其他浏览器不识别

例如   

<!--[if!IE]>
　　<p>12312312312123</p>
<!<![endif]-->

chrome 浏览器就不识别

3、采用 navigator.userAgent  参数判断浏览器版本进行兼容。

if(window.navigator.userAgent.indexOf('MSIE')>-1&&window.navigator.userAgent.charAt(30)==9){/*ie9下拉箭头兼容*/
            var styles = document.createElement('style');
            styles.type = 'text/css';
            try{
                styles.innerHTML = 'select.form-control{ background-image:none!important;}input.ie9{width:68%!important;}'
            }catch(er){
                console.log(er)
            }
        }

可以精确地 判断 浏览器是否为ie9 浏览器。

解决了这个问题。

 
标签：

相关文章