设置元素的不透明度会破坏Chrome中父级的滚动

Question

我遇到了一个我根本无法理解的错误，而且我无法在网上找到解决方案。

我的设置非常简单：我有一个容纳不同孩子的容器。容器（屏幕截图中标记为红色）具有固定高度和溢出自动。滚动效果与预期一致。

.card-details-container {
    height: 500px;
    overflow-y: auto;
}

但是当我改变其中一个儿童的不透明度时，它突然被打破了：

.barchart .barchart-bars div    {
    opacity: .5;
}

我只在Chrome中遇到此错误（41.0.2272.118）。我不知道为什么会发生这种情况。任何帮助表示赞赏！

Answer 1

尝试：

/* Theoretically for IE 8 & 9 (more valid) */   
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;

另外，检查边框。