2

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

该页面使用了许多 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 等人目前没有正确实施这个......”，至少那时我会知道没有什么可做的完成它...）

谢谢！

4

1 回答 1

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 无关——透明度在所有这些上都运行良好——我认为这很可能是您的代码被操纵或传递到浏览器的方式。

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

于 2014-03-13T17:15:03.427 回答