css - 谷歌浏览器将部分屏幕外的 div 加宽一个像素

Question

两年前我写了一个设计:目标是适合 1024 像素的屏幕，但有一些额外的图形内容，这样它在大屏幕上不会显得太小。结果是 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 的一部分可见时)，我在图像和蓝色标题之间偏移了一个像素。当“结果 Pane ”非常宽时，可以看到使用这个 jsFiddle:http://jsfiddle.net/hTbJA/

Here's a screenshot of the issue .奇怪的是，Google Chrome 开发人员工具在“指标”中说 div 的宽度为 140 像素，但是当我使用“元素” Pane 并将鼠标悬停在#header_left 时，它显示为 141 像素!会不会是浏览器错误？

谢谢。

Answer 1

问题是由于您的 #header_left 对象和 #header_right 对象以负边距推出超过中心线的边缘 -但中心部分的水平 margin 设置为 auto。

发生的事情是，当 body 的像素宽度为偶数时 - auto 生成 #header，即 1016px 宽，由于 margin: 0 auto; 居中，两边的像素数为偶数(例如:如果 body 是 1200px 宽，则184px 可用，因此浏览器在左侧分配 92px，在右侧分配 92px。您的 #header_left ，然后，获取 margin-left: -140px; 规则 - 将 140px 放在 #header 左边缘的左侧>，它排列成像素完美。

当 body 的像素宽度为 奇数 时，比如 1199px - 和 margin: 0 auto; 开始，分配了部分像素(在这种情况下，每边仅产生 91.5px)。因为不能用半个像素绘制对象 - 浏览器四舍五入开始渲染的实际位置 #header - 计算左边缘在 91.5px。当您的边距在 #header_left 元素上变为 -140px 时，您将在另一个奇数像素上结束 - 但这次，计算四舍五入。 (内部数学可能是通过先四舍五入 - 然后减去来计算的)。

这给你 1 个像素的外观...

在您的情况下，解决方法是将 #header_left 的 margin-left CSS 规则更改为 -139px 而不是 140px - 允许轻微重叠。我已经在您的实际网站上对其进行了测试 - 它看起来不错并且融合得很好。

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