選擇菜單背景在IE上變黑，表示角材料md-select

Question

IE-11和IE-edge瀏覽器的角度材料存在一個問題，

當主體內容垂直滾動時，角度材質將顯示選擇框周圍的黑色邊框，如該圖所示。

這也是重現問題的代碼筆。

<md-input-container> <label>State</label> <md-select ng-model="ctrl.userState"> <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}" ng-disabled="$index === 1"> {{state.abbrev}} </md-option> </md-select> </md-input-container> http：// codepen .io / anon / pen / BzRjBx

問題可以通過刪除position:fixed 。 但會在棱角材質功能方面造成問題。

該怎么辦？

Answer 1

盡管我最初發布的其他答案最初似乎可以解決問題，但這些答案似乎都不是完美的選擇。

真正的罪魁禍首似乎是由棱角材料設定的背景。

有關修補程序，請參見以下codepen： http ://codepen.io/anon/pen/gwOdNm

以下樣式導致此問題：

html.md-default-theme, html, body.md-default-theme, body {
    color: rgba(0,0,0,0.87);
    background-color: rgb(250,250,250);
}

使用以下樣式覆蓋似乎可以完全解決此問題：

html.md-default-theme, html, body.md-default-theme, body {
    background-color: transparent;
}

Answer 2

當引導程序也與角形材料一起使用時，似乎會發生這種情況。 尚未找到修復程序。

Answer 3

當引導程序也與角形材料一起使用時，似乎會發生這種情況。

罪魁禍首似乎是在*上設置邊框大小。

當在*上使用border-box時，md-select（顯示奇怪的背景）

例如* {-webkit-box-sizing：border-box; -moz-box-sizing：邊框框； 框大小：border-box； }

因此，將引導程序與角材料一起使用會導致此問題。

以下內容可以解決此問題，但會損壞引導程序樣式。 * {-webkit-box-sizing：未設置； -moz-box-sizing：未設置； 框大小：未設置； }