如何在IE中间准确对齐font-icon

Question

我有一个select2组件，我在最后添加了插入符号部分。

以下是我添加的代码

_caretSection = '<div class="select2-selection__arrawicon"><span><i class="fa fa-caret-down"></i></span></div>'
var mainspancontrol = this.domElement.find(".select2-selection__rendered");
mainspancontrol.css("width", 'calc(100% - 25px)');
this.domElement.find(".select2-selection--multiple").append(_caretSection);

以下是我添加的CSS。

.select2-selection__arrawicon {
    background-image: -khtml-gradient(linear, left top, left bottom, from(#F2F0F0), to(#C9C9C9));
    background-image: -moz-linear-gradient(top, #F2F0F0, #C9C9C9);
    background-image: -ms-linear-gradient(top, #F2F0F0, #C9C9C9);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F0F0), color-stop(100%, #C9C9C9));
    background-image: -webkit-linear-gradient(top, #F2F0F0, #C9C9C9);
    background-image: -o-linear-gradient(top, #F2F0F0, #C9C9C9);
    background-image: linear-gradient(#F2F0F0, #C9C9C9);
    width: 25px;
    color: #000000;
    height: calc(100% - 2px);
    align-items: center;
    position: absolute;
    display: grid;
    text-align: center;
    bottom: 1px;
    right: 1px;
}

父母的css如下所示

.select2-container{

border-color: #e5e5e5 !important;
border-radius: 0px !important;
min-height: 25px !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

} 我相信在父母的CSS中没有与定位相关的主要风格。默认的select2＆＃c; css将应用于父级。

但它在IE10中看起来很扭曲。我怎么能在IE 10及以上版本中实现这一点？

Answer 1

这是另一个例子的css。需要添加顶部和底部= 0.

.select2-selection__arrow {
    height: auto;
    position: absolute;
    top: 0;
    right: 1px;
    width: 20px;
    bottom: 0;
}

对于箭头添加前50％。这是箭头对齐垂直

.select2-selection__arrow > span {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0px;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0px;
}