css - IE9不透明度不一致的解决方法

Question

我有一个简单的问题 w.r.t.仅在 IE9 中背景颜色的 alpha 不透明度。

我正在复制使用的代码，

HTML:

<div class="dropdown custom-select-lang">
    <select name="one" class="languageDrop dropdown-select">
        <option value="1">ENGLISH</option>
        <option value="2">Option #1</option>
        <option value="3">Option #2</option>
    </select>
</div>

CSS:

.dropdown { display: inline-block; position: relative; overflow: hidden; height: 38px; width: 110px; background: rgba(255,255,255,0.9);}

.dropdown:after { content: ''; position: absolute; z-index: 2; top: 9px; right: 10px; width: 0; height: 0; border: 4px dashed; border-color: #888888 transparent; pointer-events: none;}

.dropdown:after { margin-top: 8px; border-top-style: solid; border-bottom: none;}

.dropdown-select { position: relative; width: 130%; margin: 0; padding: 6px; height: 38px;  font-size: 12px; color: #62717a; border: 0; border-radius: 0; -webkit-appearance: none; float: left;}

我还使用了以下仅适用于 IE9 的 hack:

/* IE9 only */
:root .currChangeDrop.dropdown-select{ width: 150%; background: rgba(255,255,255,0.9);}

Answer 1

我看到您将背景添加到错误的 div。将背景添加到您的 .dropdown-select 类

所以你的类现在看起来像下面这样:

.dropdown-select {background: rgba(255,255,255,0.5); position: relative; width: 130%; margin: 0; padding: 6px; height: 38px;  font-size: 12px; color: #62717a; border: 0; border-radius: 0; -webkit-appearance: none; float: left;}

不需要 IE8 的 IE9 的 css hack

让我知道这是否有效

...