Html 我是否可以仅使用CSS在Microsoft Edge的下拉列表中应用背景色？

我已经创建了，它包括一个使用CSS样式的下拉列表。这就是它在Firefox和Chrome中的样子，它正在如期工作：

但是，在Microsoft Edge中，下拉菜单基本上是不可见的，我认为这是因为背景颜色没有渲染。看起来是这样的：

如果单击下拉列表所在的区域，则该下拉列表将部分可见：

我已经看过了，但是我不完全清楚为什么背景没有渲染。一些答案表明我需要将样式直接放在

选项

元素上，而其他答案则使用带有

ul

元素的Javascript

如果可能的话，我想使用纯CSS解决方案。我不需要支持IE8或以下，只支持IE9及以上，包括Edge

这是我正在使用的SASS格式的CSS：

.drop-down {
    display: block;
    -webkit-appearance: none;  /*REMOVES DEFAULT CHROME & SAFARI STYLE*/
    -moz-appearance: none;  /*REMOVES DEFAULT FIREFOX STYLE*/
    border: 0 !important;  /*REMOVES BORDER*/
    margin-top: .5em;
    color: white;
    font-size:1em;
    padding: .4em 2em .4em .6em;
    cursor: pointer;
    background-size: 1em;
    background: $formever_blue url(dropdown_arrow.png) no-repeat;
    background-position-x: calc(100% - 0.5em);
    background-position-y: center;
}
.download-form .drop-down {
    font-size: 2em;
    width: 100%;
}

---

如何使Edge中的下拉样式与Firefox中的下拉样式相匹配？

您可以将背景属性中的计算（100%-.5em）更改为固定值。或者在IE的当前特殊属性之前添加另一个没有计算的背景属性

更新：

background: $color url() no-repeat;
background-position-x: calc(100% - 0.5em);
background-position-y: center;

---

您可以将背景属性中的计算（100%-.5em）更改为固定值。或者在IE的当前特殊属性之前添加另一个没有计算的背景属性

更新：

background: $color url() no-repeat;
background-position-x: calc(100% - 0.5em);
background-position-y: center;

---

谢谢你的回复。我尝试用一个固定值替换

calc（100%-.5em）

，并将

背景色移动到一个单独的声明中。但两人似乎都没有解决问题。你是说Edge不接受
calc
声明吗？我认为Edge不接受这个或其他复杂声明中的calc。在像宽度这样简单的事情中，它会很好地工作。顺便说一句，你可以尝试使用
background-position-x
进行
calc
，我更新了答案。谢谢你更新的代码。我已经更新了我的问题，包括我现在如何拥有CSS，这是基于你的答案。不幸的是，当我在我的计算机上的Edge中加载页面时，下拉菜单仍然不可见，如前所述。感谢您的回复。我尝试用一个固定值替换
calc（100%-.5em）
，并将
背景色移动到一个单独的声明中。但两人似乎都没有解决问题。你是说Edge不接受
calc
声明吗？我认为Edge不接受这个或其他复杂声明中的calc。在像宽度这样简单的事情中，它会很好地工作。顺便说一句，你可以尝试使用
background-position-x
进行
calc
，我更新了答案。谢谢你更新的代码。我已经更新了我的问题，包括我现在如何拥有CSS，这是基于你的答案。不幸的是，当我在计算机上的Edge中加载页面时，下拉菜单仍不可见，如前所述。