背景中心与铬（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）

回答

相关问题