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

我正在构建一个网站，其标题中有一个全宽背景图像，可随页面调整大小。在 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% 作为背景大小，并在标题下方放置填充或边框。谷歌搜索这个问题没有发现任何问题。如果有人知道答案，请提前致谢。

EDIT:

该问题似乎与 FireFox 如何缩放背景图像有关。以下似乎可以使用 FireFox 23.0.1 、 OSX 10.8.4 为我修复它

在style.css中，尝试将标题规则中的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;
}

If I'm understanding your question correctly, check the top of the stylesheet @ http://soundsoups.julie-edwards.com/css/responsive.css 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;     
}  

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