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的黑客攻击：

/* 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

让我知道这是否有效

...

Answer 2

两种解决方案，选择您喜欢的。

在您的标记上添加一个类.transparent，并在样式表中添加以下代码：

.transparent {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

或者只是将其添加到您的css声明中。

.you-selector {
   /*some stuff here*/
   filter: alpha(opacity=50);
}

[css-tricks] http://css-tricks.com/css-transparency-settings-for-all-broswers/

建议采用第一种解决方案

IE9中不透明度不一致的解决方案是什么？

2 个答案: