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

Question

我有一个我完全不明白的错误，而且我在网上找不到解决方案。

我的设置非常简单:我有一个包含各种子项的容器。容器(在屏幕截图中标记为红色)具有固定高度和 overflow-y auto。滚动按预期工作。

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

但是当我改变其中一个 child 的不透明度时，它突然坏掉了:

.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;

另外，检查边界。