Question

两年前我写了一个设计：目标是适应1024px的屏幕，但是有一些额外的图形内容，所以在大屏幕上看起来不会太小。结果是http://megaglest.org/，一个开源项目的网站。

这是HTML：我不想使用img标签，因为它可以让我在无法加载这些图像的响应式设计上工作：

<div id='all'>
    <div id="header">
        <div id="header_left"></div>
    </div>
</div>

这是相应的CSS：

#all {
    width: 1016px;
    margin: 0 auto;
}
#header {
    height: 313px;
    background-color: #4dd;
}

#header_left {
    float: left;
    width: 140px;
    margin-left: -140px;
    height: 379px;

    /* works fine */
    /* background: #dd4; */

    /* there's a one pixel offet */
    background:
       url("http://megaglest.org/uploads/megaglest2011/header/left.jpg")
       no-repeat; 
}

仅在Google Chrome上（Linux上为22.0.1229.94），并且仅在特定窗口大小时（当只有#header_left的一部分可见时），我在图像和蓝色标题之间得到一个偏移的像素。当“结果窗格”非常宽时，可以看到使用此jsFiddle：http://jsfiddle.net/hTbJA/

Here's a screenshot of the issue。有趣的是，谷歌Chrome开发人员工具在“指标”中说div是140px宽，但是当我使用“Elements”窗格并悬停#header_left时，它说141px！它可能是一个浏览器错误吗？

感谢。

Answer 1

这个问题是由于你的#header_left物体和#header_right物体推出中心线的边缘而带有负边距这一事实造成的 - 但是中心部分有一个水平{ {1}}设置为margin。

当auto是偶数个像素宽时，body使auto宽#header为中心，偶数个由于1016px（示例：如果正文为margin: 0 auto;宽，1200px可用，因此浏览器会在左侧分配184px，{ {1}}，然后，92px获得92px规则 - 将#header_left置于margin-left: -140px;左边缘的左侧，它的像素完美排列。

当140px为奇数像素数宽时，例如#header - 并且body启动时，会分配一个部分像素（在这种情况下，每边仅产生1199px。因为对象无法以半个像素绘制 - 浏览器向上舍入表示开始渲染margin: 0 auto;的实际位置 - 并且左边缘计算为{{1 }}。当你的余量在91.5px元素上变为#header时，你会在另一个奇数像素上结束 - 但这一次，计算向下舍入。（内部数学可能是先计算 - 然后减去）。

这使你看起来像1个像素的外观......

修复 - 在您的方案中 - 是将91.5px的{{1}} CSS规则更改为-140px而不是#header_left - 并允许轻微重叠。我已经用你的实际网站对它进行了测试 - 它看起来很好并且融合得很好。

所以 - 回答你的问题 - 不 - 这不是一个错误本身 - 它只是意味着开发人员工具和元素窗格的计算方式不同。当处理部分像素时，其中一个向上舍入并向下舍入一个。或者也许一个是测量屏幕上实际呈现的内容，另一个测量CSS规则指示的内容。

谷歌浏览器扩大了一个像素，部分屏幕外

1 个答案: