仅限 Firefox 中的疯狂 CSS 问题 - 位置固定和背景颜色答案

【问题标题】：Crazy CSS Issue in Firefox Only - position fixed and background color仅限 Firefox 中的疯狂 CSS 问题 - 位置固定和背景颜色
【发布时间】：2011-11-29 22:40:49
【问题描述】：

查看此链接：

http://lsp2.tpdserver2.co.uk/test.htm

在 IE/Chrome 中显示正常，但在 Firefox (6.0.1) 中，蓝色标题周围有 1 像素的边框。

如果我向#header-content 添加背景颜色，则 1px 白色边框消失。这似乎很疯狂。

我无法弄清楚这是怎么回事，而我正在尝试构建的相关页面取决于第二个固定容器没有背景颜色。

这是我看到的问题的图片：

Link to Image

【问题讨论】：

我无法在 FF 6.0.1 中重现这一点
你确定吗？使用 firebug 设置#header-content 的背景颜色，并观察蓝色框在左上角正确排列。我已经在运行 FF6.0.1 的 2 台不同的计算机上尝试过
我可以复制它。不过，不知道如何解决它。 I'd suggest filing a bug for it.
刚刚安装了 FF 6 和 firebug。没有看到你描述的边界。可能是您的开发环境独有的东西。
添加了一张图片来显示正在发生的事情。

标签： html css firefox

【解决方案1】：

这是 Firefox 中的布局渲染错误。此错误已被报告，据我所知，它已在下一个版本中修复。我知道的唯一解决方案是使用opacity:0.9999999。它将正确呈现为 opacity:1，但修复了这个烦人的错误。

试试#header { opacity:0.9999999; }

Bugzilla : Bug 677095

编辑：Firefox 8 不受此错误影响，将不透明度设置为 0.9999999 会导致元素周围出现奇怪的边框，所以我不想再使用它了

【讨论】：

这适用于我提出的测试页面，谢谢。不幸的是，它不适用于我的实际网站（它的布局要复杂得多，但也有同样的问题）。
从头开始，它也适用于我的页面，您需要确切的零个数！谢谢:)

【解决方案2】：

如果您不“重置”CSS，浏览器会添加不同的默认值，这可能就是这里发生的情况。

【讨论】：

【解决方案3】：

如果您的#header-content 的z-index 值不大于 10，则该错误已修复。如果它是 11 或更大，那么我也可以看到神秘的差距。

真的很奇怪。

【讨论】：

实际上它似乎与第二个容器的 z-index 有关。如果您使第二个容器 z-index 小于第一个容器，问题就会消失。我不知道这是否会对我的实际网页有所帮助，但它仍然不会发生。

【解决方案4】：

我无法在 FF 6.0.1 中重现；但是，您可以使用

解决此问题

background-color: transparent;

在#header-content 上，如果您不希望它被看穿，则为白色。

这仍应提供您提到的修复，同时根据需要保留空白 div。

更新：

好的，感谢屏幕截图，但仍然无法重现，这次是 ff 6.0.2 - 我环顾四周后发现可以在不同的缩放级别上重现类似的问题。

Blog post 解释缩放边框错误，其中包括此test page。我不确定这是否涉及，看起来相似但不一样，缩放错误会占用整个页面的一部分，包括#header-content的边框。

至于你的cmets围绕透明，你可以使用它，仍然提供背景图片，这不适合你吗？

【讨论】：

我说这在我的问题中修复了它。这就是问题所在，因为在我的真实页面上，这个容器需要一个背景图片 - 因此它被破坏了。
禁用所有插件仍然会遇到同样的问题。很微妙，我在问题中添加了一张图片来显示它。
谢谢路易斯。透明背景似乎不仅仅适用于固定颜色。 z-index 也会影响它。我将它作为 Firefox 上的一个错误提出来，并且那里的一些讨论似乎将它与另一个错误相关联，据我所知，它可能与实际的 gfx 卡驱动程序有关。也许这就是为什么只有一些人可以重现这个问题。
嗯，这确实是个错误。我得看看家里的几台不同的电脑。 - 如果你真的想尝试，你可以尝试用纯色和 css 过滤它以使其透明（与我希望的透明颜色设置不同）。不过，真的很想抓住那里的东西！