调整大小时Firefox中背景图像下的闪烁线答案

【问题标题】：Flickering line under background image in Firefox on resize调整大小时Firefox中背景图像下的闪烁线
【发布时间】：2013-08-27 17:56:56
【问题描述】：

我正在构建一个在页眉中具有全宽背景图像的网站，该图像会随页面调整大小。在 Firefox 中调整图像大小时，图像下方会出现一条不寻常的闪烁水平线。该线不会完全显示，而是在更改大小时闪烁。该行出现在背景图像的底部，而不是标题元素的底部。

只有当我在 OSX 10.8.4、Firefox 23.0 中测试它时，它才会出现在 Firefox 的 MacOS 版本中。在 Windows 8、Firefox 23.0.1 或我测试过的其他浏览器中未出现此问题。

这是我标题上的代码：

<header>
    <h1><span>Sound Soups on Madison - Healthy &amp; Convenient Alternatives for Your Busy Work Week</span><a href="index.php"><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></a></h1>
    <nav id="nav-main">
        <?php echo makeLinks($nav1); ?>
    </nav>
</header>


header{
    padding:0 2.12765957% 35px;
    overflow:hidden;
    background-image:url('../images/bg-header.jpg');
    background-repeat:no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

我尝试使用封面而不是 100% 作为背景大小，并在标题下放置填充或边框。谷歌搜索问题没有出现任何问题。如果有人知道这里的答案，请提前感谢。

【问题讨论】：

我遇到了同样的问题 - 请参阅此处stackoverflow.com/questions/21931977/…

标签： css firefox responsive-design background-image

【解决方案1】：

编辑：

这个问题似乎与 FireFox 如何缩放背景图像有关。以下似乎为我修复了 FireFox 23.0.1 ， OSX 10.8.4

在 style.css 中，尝试将 header 规则中的 background-size 属性从 100% auto 更改为 99.99% auto，即

header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto; 
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}

~~如果我没有正确理解你的问题，请查看样式表顶部@http://soundsoups.julie-edwards.com/css/responsive.css~~

你有

header{
    background-image:url('../images/none.png');
    padding-bottom:15px;
    border-bottom:2px solid #7a918c;
    margin-bottom:20px;     
}

我认为边框底部是问题的原因。

祝你好运！

【讨论】：

谢谢，大卫。我拿出了那种风格，但并没有解决问题。在进入响应式样式之前，它仍在更宽的屏幕上闪烁。
是的，我明白你的意思@Julie，我看错了。在我看来，这是 FF 处理背景图像缩放的方式。如果您删除标题中的 background-size 属性并替换为 background-position: bottom right;线没了。
解决了！非常感谢，大卫。
我很高兴这对你 @Julie 有用。这是一个奇怪的FF blip，我不知道这是否是一个舍入错误问题，但肯定是我第一次遇到它。
@spinningarrow，似乎 Firefox 并不总是正确缩放背景图像，我相信你看到的行实际上是一个 1 px 的空白空间。这个修复对我有用。在 CSS 中，将规则“background-color:#fff;”添加到 HTML 选择器和'溢出：隐藏;'设置背景颜色意味着您看不到空白区域，并且溢出隐藏会强制此背景颜色环绕所有包含的元素，即整个页面。

【解决方案2】：

对于 body 元素上的背景大小的图像也有同样的问题。我通过将背景大小的图像应用于定位的 div 元素来修复它。

如果有帮助的话。

【讨论】：

【解决方案3】：

我通过将 .jpg 背景图像转换为 .png 解决了这个问题。如果其他人遇到此问题并且无法更改 background-size，请尝试此操作。

【讨论】：

这对我不起作用。我将background-size 设置为contain。