javascript - 如何在 IE 中将字体图标精确地居中对齐

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 的 css 将应用于父级。

但它在 IE10 中看起来失真了。我怎样才能在 IE 10 及更高版本中实现这一目标？

Answer 1

这是来自另一个示例的 css。需要添加 top 和 bottom = 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;
}