背景大小留下了一个像素线到我的浏览器右侧的

Question

我使用：

body { 
    background:url('../img/wide.jpg') center center no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    padding-top: 10%; 
    color: #fff; 
} 

然而，有一个小1px线在浏览器的右侧，我似乎无法盖。我在Opera，FF Dev和Chrome上本地测试了我的网站 - 所有问题都是一样的。

我错过了什么吗？

• 这里是右侧的样子（坏）：http://i.imgur.com/IO2oJkj.png
• 这里是左侧的样子（好）：http://i.imgur.com/54EFfgI.png

Answer 1

试试这个background-size: 100%;

body { 
    background:url('../img/wide.jpg') center center no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: 100%; 
    padding-top: 10%; 
    color: #fff; 
} 

而且检查你的图像可能是你的图像有一条线。

Answer 2

我用我的解决方案看到的唯一一个栏是浏览器窗口周围的1px中风，不确定这是否是您想要消除或不是。

html{ 
margin: 0; 
padding: 0; 
} 

body{ 
background: url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg') center center no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
padding-top: 10%; 
color: #fff; 
padding: 0px; 
margin: 0 auto; 
width: 100%; 
} 

Full Screen Fiddle

Code Fiddle

Answer 3

我的猜测是，这是一个浏览器错误绘画由于容器像素之间下跌的大小。如果容器没有设置精确的像素宽度，但使用类似百分比的东西（或者如果您放大浏览器或使用视网膜显示器），那么它可能会触及像素的边缘，并在绘制框，并在绘制背景图像时向下舍入。值得向浏览器供应商提交错误报告。

解决方法是提供一个嵌入框阴影（而不是常规边框）。 1px的嵌入边框将与背景图像重叠（而边框只会使背景图像从每个方向推入1px）。由于它是一个子像素浏览器绘画问题，因此您的奇怪边框永远不会超过1像素。

box-shadow: inset 0px 0px 0px 1px gray;

不是一个真正的解决方案，但可能会更好看，将与浏览器的Chrome融为一体。