在Firefox中的背景图像下的闪烁线调整大小 [英] Flickering line under background image in Firefox on resize

问题描述

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

仅当我在OSX 10.8.4，Firefox 23.0中测试时，它才出现在Firefox的MacOS版本中。

这是我的标题上的代码：

这个问题没有出现在Windows 8，Firefox 23.0.1或其他浏览器中。

 < header> 
< h1>< span>麦迪逊的声音汤 - 健康&您忙碌工作周的方便替代方案< / span>< a href =index.php>< img src =images / sound-soups.jpgid =logoalt =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％; 
} 
  

我尝试使用cover而不是100％作为背景大小，在标题下放置填充或边框。 Googling的问题没有出现什么。

p>这个问题似乎与FireFox如何缩放背景图像有关。下面似乎修复它与我的FireFox 23.0.1，OSX 10.8.4

在style.css，尝试改变标题规则中的background-size属性100％自动调整为99.99％，即

 标题{
 background-image：url /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; 
} 
  

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

祝你好运！

I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.

It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.

Here is the code on my header:

<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%;
}

I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.

解决方案

EDIT:

The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4

In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie

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

You have

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

I think the border-bottom is the cause of the problem.

Good luck!

这篇关于在Firefox中的背景图像下的闪烁线调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！