IE 和 Edge 中的样式

Question

我在做手风琴，公司内部写的风格。我的初始输出 Chrome 看起来像这样

向下箭头位于右上角。在 FireFox 中也很好，但是当我们尝试在 IE 和 Edge 上显示时，箭头移动到左侧。

这是我对以下元素的检查：

header 手风琴

.accordion .accordion-header {
    font-family: "MuseoSans-300", Helvetica, Arial, sans-serif;
    font-size: 1.15em;
    line-height: 1.4;
    color: #6d8191;
    margin-bottom: 0;
    padding: 15px 30px 15px 0;
    position: relative;
    border-top: 1px solid #d8d8d8;
}

手风琴中的箭头：

.accordion .accordion-header .accordion-arrow {
    float: right;
    margin-right: 15px;
    position: absolute;
    top: 13px;
    right: -3px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: transform 0.25s, -webkit-transform 0.25s;
}

有任何针对 IE 和 Edge 修复此问题的建议吗？

Answer 1

这适用于 Edge 12+

@supports (-ms-ime-align:auto) {
  .selector { property:value; } 
}

read on @supports as a rule

所以就这样对齐:

@supports (-ms-ime-align:auto) {
      .accordion .accordion-header .accordion-arrow {  right:value; } 
    }

Explorer 11+ 浏览器（我没测试过）

_:-ms-fullscreen, :root .selector { property:value; }

IE 和 Edge 中的样式

Styling in IE and Edge

css

internet-explorer

google-chrome

accordion

microsoft-edge