在 css 中定位 IE 11 不起作用

Question

我正在嘗試修復 IE11 中的一個微小布局問題，其中滑塊 pip 跳出其位置（在其他主要瀏覽器中都很好）

我已將媒體查詢添加到樣式表（如下）但沒有運氣。 我也嘗試過條件代碼、各種黑客等。但沒有任何效果或影響所有瀏覽器。 我花了幾個小時嘗試各種解決方案但沒有任何運氣並且沒有想法。 需要幫助請。 布局問題說明

  @media screen and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {
    #yardstick-text-6-1 {
      margin-top: -43px;
    }
    #yardstick6-1 {
      margin-top: -53px;
    }
  }

網頁可以在這里看到密碼：quote321

Answer 1

嘗試只使用(-ms-high-contrast: none)像這樣：

@media screen and (-ms-high-contrast: none) {
  #yardstick-text-6-1 {
    margin-top: -43px;
  }
  #yardstick6-1 {
    margin-top: -53px;
  }
}

或:-ms-fullscreen,:root .selector :

_:-ms-fullscreen,
:root #yardstick-text-6-1.ie11 {
  margin-top: -43px;
}
_:-ms-fullscreen,
:root #yardstick-6-1.ie11 {
  margin-top: -53px;
}

<div id="yardstick6-1" class="ie11">
  <div id="yardstick-text6-1" class="ie11"></div>
</div>

請參閱IE 的 BrowserHacks

注意：要輕松修復，您可以從#yardstick6刪除float:left

Answer 2

以下應該可以解決您的問題。 這個想法是應用特定於 IE 的 CSS。

@media all and (-ms-high-contrast:active), all and (-ms-high-contrast:none) {
 //Your CSS
}