在Firefox中的背景圖像下閃爍線條調整大小

我正在構建一個網站，在頁面大小調整的頁眉中有一個全寬度的背景圖像。在Firefox中調整大小時，圖像下出現一條不尋常的閃爍水平線。該行不會完全顯示，但在更改大小時會閃爍。該行出現在背景圖片的底部，而不是頭部元素的底部。在Firefox中的背景圖像下閃爍線條調整大小

只有當我在OSX 10.8.4，Firefox 23.0中測試它時，它纔出現在Firefox的MacOS版本中。這個問題在Windows 8，Firefox 23.0.1或我測試過的其他瀏覽器中沒有出現。

這裏是我的頭代碼：我一直在使用，而不是100％的背景大小蓋，並把填充或邊框的標題下試圖

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

。用谷歌搜索這個問題並沒有出現任何問題。如果有人知道答案，請提前致謝。

來源

2013-08-24 Julie

我有同樣的問題 - 請看這裏http://stackoverflow.com/questions/21931977/firefox-linux-centos-responsive-design-image-scaling-porblem/21935428#21935428 – 2014-02-21 13:14:54

編輯：

這個問題似乎與火狐如何縮放背景圖像。下面似乎與Firefox 23.0.1，OSX 10.8.4

修復它爲我的style.css，嘗試在100％自動標題規則的背景大小屬性更改爲99.99％，汽車，即

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

~~我認爲邊界底部是問題的原因。~~

祝你好運！

來源

2013-08-25 00:15:17

謝謝，大衛。我拿出了這種風格，並沒有解決這個問題。在進入響應式風格之前，它仍然在更寬的屏幕上閃爍。 – Julie

是的，我明白你的意思@Julie，我看着錯誤的東西。在我看來，這是FF處理背景圖像縮放的方式。如果您刪除標題中的background-size屬性並替換爲background-position：右下;線路消失了。 –

修好了！非常感謝，大衛。 – Julie

-1

我通過將我的.jpg背景圖像轉換爲.png解決了這個問題。如果其他人遇到這種情況，並且無法更改background-size，請嘗試此操作。

來源

2014-04-15 00:49:53

這不適合我。我將'background-size'設置爲'contains'。 – spinningarrow

對於body元素上的背景大小的圖像有同樣的問題。我通過將背景大小的圖像應用於定位的div元素來修復它。

如果這可以有任何幫助。

來源

2014-08-11 12:01:16 Schpr

在Firefox中的背景圖像下閃爍線條調整大小

回答

相關問題