ie 9 select 下拉框右侧箭头

由于不同浏览器的 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 后缀。

添加 background-image:none9;

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

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

例如

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{68%!important;}'
            }catch(er){
                console.log(er)
            }
        }

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

解决了这个问题。

ie 9 select 下拉框 右侧 箭头

ie 9 select 下拉框右侧箭头