3

两年前我写了一个设计：目标是适应 1024 像素的屏幕，但有一些额外的图形内容，这样在大屏幕上就不会显得太小。结果是http://megalest.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/

这是该问题的屏幕截图。奇怪的是，Google Chrome 开发者工具在“metrics”中说 div 是 140px 宽，但是当我使用“Elements”窗​​格并悬停#header_left 时，它却显示为 141px！会不会是浏览器的bug？

谢谢。

4

1 回答 1

6

问题是由于您的#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. 当您的边距然后-140px在#header_left元素上进行时，您会在另一个奇数像素上结束 - 但是这一次，计算会向下舍入。（内部数学可能通过先四舍五入计算 - 然后减去）。

这使您的外观减少了 1 个像素...

修复 - 在您的场景中 - 是将您#header_left的margin-leftCSS 规则更改-139px为140px- 并允许轻微重叠。我已经在您的实际站点上对其进行了测试——它看起来很好并且融合得很好。

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

于 2012-11-02T17:47:38.987 回答