选择菜单背景在 IE 上变黑以获得角度材料 md-select答案

【问题标题】：Select menu background goes black on IE for angular material md-select选择菜单背景在 IE 上变黑以获得角度材料 md-select
【发布时间】：2016-09-26 20:56:37
【问题描述】：

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 来解决。但它会产生角度材质功能的问题。

怎么办？

【问题讨论】：

标签： javascript css angularjs internet-explorer angular-material

【解决方案1】：

我之前发布的其他答案似乎都不完美，尽管它们最初似乎可以解决问题。

真正的罪魁祸首似乎是 angular-material 设置的背景。

请参阅以下代码笔进行修复： 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;
}

【讨论】：

这正是我所需要的。您应该将其标记为任何其他有类似问题的答案。

【解决方案2】：

当 bootstrap 也与 angular material 一起使用时，这似乎会发生。还没有找到解决办法。

【讨论】：

看来这不是实际问题。请看我的其他答案。

【解决方案3】：

当 bootstrap 也与 angular material 一起使用时，这似乎会发生。

罪魁祸首似乎是 *. 上的边框大小。

当在 * 上使用边框框时，md-select（显示奇怪的背景）

例如* { -webkit-box-sizing: 边框； -moz-box-sizing：边框框； box-sizing：边框框； }

因此，将 bootstrap 与 angular-material 一起使用会导致此问题。

以下解决了它，但搞砸了引导程序样式。 * { -webkit-box-sizing: 未设置； -moz-box-sizing：未设置；盒子尺寸：未设置； }

【讨论】：

看来这不是实际问题。请看我的其他答案。