Chrome 在某些元素背景中未正确显示“rgba()”样式...（无 alpha 混合）答案

【问题标题】：Chrome isn't correctly displaying "rgba()" styles in some element backgrounds... (no alpha blending)Chrome 在某些元素背景中未正确显示“rgba()”样式...（无 alpha 混合）
【发布时间】：2012-12-07 06:35:47
【问题描述】：

我正在整理一个页面，并且在跨浏览器的背景方面真的很挣扎。

该页面使用了许多 alpha 混合背景、框阴影和边框半径，并且几乎完全使用内联样式进行合成（基本上很少/没有使用 CSS 类）。

IE9 是我的主要浏览器，在其中，页面看起来很棒。然而，在 Chrome 上（我被告知 Firefox），我的大多数 alpha 混合背景要么完全不呈现（透明），要么呈现为纯色！我正在使用带有 HTML5 !DOCTYPE 声明的标准模式，所以我并不是在利用 IE 怪癖或任何东西！

显然在 9 之前的 IE 版本上，背景（和其他东西都是有问题的）。但我并不关心支持古老的软件，这些用户可以获得他们应得的浏览体验。

多年来的共同话题是“IE 的透明度糟透了！”，所以我很高兴地期待，如果我让它在 IE（通常是最差的平台）上充分工作，那么其他人就会顺其自然，但在这里我正朝着相反的方向努力！我正在使用标准的“rgba(r,g,b,a);”关于“背景颜色”属性的指令，所以我没有使用任何激进的 DirectX 过滤器或其他魔法，但是，在（不是 Internet Explorer 9+）浏览器上，我得到了一些非 alpha 混合结果（有时它可以工作，有时不会）。

可以在以下位置预览该站点：https://net-xpert.com/ -- 所有下拉菜单都应该具有半透明背景，页面底部的悬停链接栏也是如此。此外，如果您转到“向我们提问”页面，那里的对话框应该在所有输入字段上都有着色背景...

哦，最后，我非常讨厌实现任何 b/s、特定于浏览器/平台的“实验性”样式代码！ CSS2/3 中的任何东西都很好，但我只是拒绝使用任何类型的“-browser-some-quirky-CSSAttribute”样式！（我希望更多的开发人员也这样做！--那么浏览器制造商将承受更大的压力来采用这些标准，我们的生活会变得如此轻松，但我离题了......）

无论如何，对于符合标准的解决方案的任何见解都将不胜感激（即使它只是一个公共承认“是的，Chrome 等人目前没有正确实现这个......”，至少那时我会知道没有什么可做的......）

谢谢！

【问题讨论】：

rgba 至少从 2010 年开始在 Chrome 中运行良好，请在此处查看浏览器支持表：css-tricks.com/rgba-browser-support
你真的不应该使用内联样式。只是说。
如果某些东西可以在 IE 上运行，而不能在 Chrome 和 Firefox 上运行，那是 IE 有错误。
@Kondrad Dzwinel：你看过页面了吗？因为当我与 Chrome 并排比较时，你可以清楚地看到问题......所以你的意思是，如果 <div style='position:absolute;top:10px;left:10px;width:300px;height:300px;border-radius:5px;box-shadow:5px 5px 5px #000000;border:solid 1px white;color:white;background-Color:rgba(11,6,77,0.70);'>Hello World</div> 在 IE9 上正确呈现，但在 Chrome 上没有 alpha，那就是 IE 错误?
就这样吗？两个死记硬背的答案无论如何都无法解决我遇到的问题的实际情况？

标签： html google-chrome css internet-explorer-9 rgba

【解决方案1】：

嗯，这是一个很晚的答案，但也许这对您仍然有用（您的网站似乎仍在运行）。

我有一个应该为你工作的解决方案，假设你可以修改你的一个样式表。至于为什么你遇到这个问题..？我只能推测，因为我不知道如何重新创建您的确切配置。

修复；

div[id^=mainMenuOverDiv] {
  background-color: rgba(128,128,128,0.9) !important;
}

我不喜欢不必要地使用!important，您可以通过使用更高的特异性来消除它。不过，我已经在 Firefox 中对此进行了测试，它似乎可以工作 - 显然，您需要用自己的值替换实际的 rgba(x,x,x,x) 值。

您似乎正在使用一些 JavaScript（我假设），每次您将鼠标悬停在菜单上时都会随机化 DIV ID - 但开头保持一致（即一次是#mainMenuOverDivjkhasdfsd89f9f9sdfl3l4l34lfdbvbc，然后是下一次，它将是#mainMenuOverDivLSDklsdkmlzxncbzmxnc90234xcvassf)。使用 'starts with' CSS 选择器（如示例中提供的那样），您仍然可以隔离菜单，尽管这个潜在的扳手正在工作中。

考虑到内联 CSS 通常不能被覆盖，这很有趣（并且可能很有见地）。

至于为什么会发生这种情况，一种可能是某些 JavaScript 生成的代码没有正确地移植到非 IE 浏览器。或者，如果您在任何地方使用它，代码缩小也可能会破坏某些功能（并且因浏览器而异） - 许多缩小插件需要针对个别设置进行调整，以确保一切继续正常工作，因为一种尺寸不一定适合所有人.例如，您可能会发现在一个站点上，您可以缩小除 JavaScript 之外的所有内容，而在另一个站点上，JavaScript 可以，但您无法缩小内联 CSS 等。Google Analytics（分析）代码有时会成为此问题的受害者。

所以在我看来，问题可能与 IE/Chrome/Firefox 或 Safari 无关——透明度在所有这些上都运行良好——我认为这很可能是您的代码被操纵或交付给浏览器。

希望在某种程度上有所帮助。如果您不能使用外部样式表，请告诉我，我会尝试寻找替代方案。

【讨论】：