问题

在Chrome浏览器和IE11浏览器下，select下拉框表现的样式不一致。Chrome浏览器下，如图所示：

IE11浏览器下，如图所示：

此时select下拉框的css的代码如下：

.Data_select {width: 90px;height: 90px;line-height: 90px;margin-bottom: 20px;text-align: center;padding: 0 2%;
}.Data_select {background: rgba(3,47,108,0.57);border: 2px solid #3853ca;border-radius: 8px;box-shadow: 5px 5px 84px rgba(10,31,75,0.75) inset;cursor: pointer;
}

解决办法

想要解决selelct下拉框样式兼容问题，可以将其下拉箭头样式隐藏，然后用下拉箭头图片代替，下拉箭头图片可以到阿里巴巴图标库下载，如下：

下载完毕后，设置select下拉框的css样式，如下：

.Data_select {/*设置select下拉框的背景颜色和背景图片*/background: rgba(3,47,108,0.57) url("images/xiala4.png") no-repeat center;border: 2px solid #3853ca;border-radius: 8px;box-shadow: 5px 5px 84px rgba(10,31,75,0.75) inset;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;/*设置select下拉框背景图片的大小和位置*/background-size: 18px 18px;background-position-x: 60px;
}/*设置select下拉框的样式，去掉下拉框箭头*/.Data_select::-ms-expand {display: none;}

设置完select下拉框的css样式后，再来看一下效果，Chrome浏览器下，如图所示：

IE11浏览器下，如图所示：