背景中心與鉻（bug）

我有一個背景圖像居中，鉻顯示偏移一個像素。背景中心與鉻（bug）

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent; 
    width: 100% 
} 
#header { 
    width: 986px; 
    margin: 100px auto 0 auto; 
}

HTML

<html> 
<body> 
    <div id="container"> 
     <div id="header">centered content</div> 
    </div> 
</body> 
</html>

我猜它與瀏覽器如何處理不同的center -or 50%做的事情 - 在CSS中background的屬性：

enter image description here

是否有已知的（simple）黑客或替代方法來解決這個問題？背景容器具有爲100％寬。

來源

2011-06-23 Naoise Golden

對於我來說，這並獲得成功：

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html { 
    margin-left: 1px; 
} 

}

我將張貼鏈接，此解決辦法，我發現是我幾天前得到的。在同一篇文章中，這個傢伙說問題出在容器寬度的奇數或偶數。無論如何，這在我的情況下解決了這個問題。

來源

2011-07-05 22:08:42 ronaldosantana

整潔！媒體查詢是關鍵，但在我的情況下，代碼是：@media screen和（-webkit-min-device-pixel-ratio：0）{#container {background-position：49.9％top; }}'（如果可以的話，改變答案） –

圖像實際上是986px？我發現修復它的最簡單方法是確保圖像的寬度是偶數。

你可以做的另一件事是在背景圖像中添加一個2px緩衝區（以保持寬度爲偶數）以解釋這種轉變。只要您向每邊添加px以保持一致，就不應該在瀏覽器中查看您的圖像。

來源

2011-06-23 12:42:08 Shauna

謝謝你的回覆。背景是986px，但我不明白如何使它甚至可以工作......然後它在其他瀏覽器中出現失衡現在正確渲染它。另外，你能否解釋一下我添加2px _buffer_？謝謝 –

@Naoise - 根據我的經驗，如果您添加或移除像素以使寬度爲偶數，它不會影響其他瀏覽器。我的意思是添加一個「緩衝區」是在圖像的任一側添加一個像素（使其寬度爲988px，而不是986px寬），以延續圖像（所以彎曲的角落會繼續向下，灰色的一面會延伸出來一個像素）。保持div在986px，所以其他瀏覽器將在需要的地方切斷圖像。 – Shauna

嘗試調整瀏覽器的大小以查看它是如何工作的...我們在這裏討論的是像素，如果窗口的寬度沒有問題，那麼一個像素就不得不在某處丟失。

來源

2011-06-23 12:42:52

是的，調整大小使其適合某些時候正確...但大多數時間是超出平衡。這是因爲Chrome如何計算像素中的小數......我希望知道一些衆所周知的修復方法。 –

99％或者你可以試試99.9999％。 –

我想背景圖像也是986像素寬？然後這個效果也應該在左側可見，然而轉過來。

我建議從容器中取出的背景圖像，並把它添加到標題：

#container { 
    width: 100%; 
} 
#header { 
    width: 986px; 
    background: url("images/header.jpg") no-repeat scroll 50% transparent; 
    margin: 100px auto 0 auto; 
}

來源

2011-06-23 12:46:43 NGLN

背景容器必須是100％寬，因此它不能進入'＃標題' –

@Naoise Golden如果背景圖像是986像素寬，那麼你可以將它添加到標題的中心。我會編輯我的答案來澄清。 – NGLN

如果你可以輸出比瀏覽器窗口更寬的圖片，那應該修復它。

如果發現這裏的解決方案 - http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

來源

2011-07-10 21:25:51 sevik

如果使背景圖像寬度奇數（987px）的定位將在所有瀏覽器保持一致。這似乎違反直覺，但似乎總是解決這個問題，我沒有任何CSS黑客攻擊。

來源

2012-07-24 00:44:48 Demian

這對我來說很好！謝謝德米安。 –

我用下面的CSS來修復webkit上的問題。如果未啓用JS，它的工作原理，前提是瀏覽器很可能會全屏幕，所以WebKit的視口寬度爲奇數

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html { 
     margin-left: 1px; 
    } 
    html.evenWidth { 
     margin-left: 0px; 
    } 
}

的JavaScript（jQuery的）

$(document).ready(function { 
var oWindow = $(window), 
htmlEl = $('html'); 

function window_width() { 
    if(oWindow.width() % 2 == 0) { 
     htmlEl.addClass('evenWidth'); 
    } else { 
     htmlEl.removeClass('evenWidth'); 
    } 
} 

$(document).ready(function(){ 
    window_width(); 
    $(window).resize(window_width); 
});

來源

2013-02-26 16:11:26

背景中心與鉻（bug）

回答

相關問題