最好自己看看,所以看看这个小提琴:
https://jsfiddle.net/6rc4zzcv/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
#container
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
background-position: center top;
background-repeat: no-repeat;
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
}
#centerbox
{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative
}
#floater
{
position: absolute;
top: 50px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="centerbox">
<div id="floater"></div>
</div>
</div>
</body>
</html>
调整浏览器窗口(或只是小提琴输出窗口)的大小时,有时红色方块恰好位于黑框内,有时会有1px的间隙。我在Chrome和IE11中进行了检查。IE11似乎尝试渲染“半像素”,因此不太明显,但仍然存在。奇怪的是,如果背景图像小于视口,则不会发生这种情况。
我可以想象造成这种影响的原因(居中代码在背景和边距在两个地方重复,并且使用了不同的舍入方法)-但是如何解决呢?
在现实生活中,黑盒子实际上是一个艺术绘制的盒子,它与背景融合在一起,因此,我宁愿避免将其拆分。
是的,正像您已经注意到的那样,问题是Chrome(可能还有其他浏览器)对大图像进行居中的错误会导致居中计算偏移。
一种解决方案是,使用另一种内部元素集代替在父级中设置2000×200px背景的问题
#bg{ /* I'm inside the parent */
position: relative;
background: url("2000x200image.jpg");
width: 2000px;
height: 200px;
left: 50%; /* center left edge */
margin-left: -1000px; /* -half width */
}
如您在上方所见,元素居中!并将与页面上所有其他居中元素相同。
HTML:
<div id="container">
<div id="centerbox">
<div id="bg"></div>
<div id="floater"></div>
</div>
</div>
CSS:
#container{
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
overflow:hidden;
}
#bg{
position:relative;
width:2000px; /* same as your image size */
height:200px;
/* center element instead of image! */
left: 50%;
margin-left:-1000px; /* -half width */
background: url('data:image/png;base64,iVBORw0KG...=');
}
#centerbox{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative;
}
#floater{
position: absolute;
top: 51px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句