CSS：将元素宽度限制为偶数答案

【问题标题】：CSS: Limit Element Width to Even NumbersCSS：将元素宽度限制为偶数
【发布时间】：2011-08-24 03:13:07
【问题描述】：

我想知道：我正在处理的网站上有一张背景图片，需要非常准确地定位。目前，它的定位是：

 body {
    ...
    width: 100%
background-position-x: center;
background-position-y: -10px;
 }

这很好用——当用户调整窗口大小时，大部分图像都保持在 x 轴的中心。

但是，如果用户将窗口的大小调整为奇数像素宽度（即主体变为 1001 像素而不是 1000 像素），则背景图像的位置似乎偏离了一点（可能是 1 像素？）。

我该如何解决这个问题？我是否必须将元素宽度限制为偶数/我该怎么做？有没有可能的 jQuery 解决方案？

编辑：一个名为 Simplegeo https://simplegeo.com/ 的网站可以完美地做到这一点。请注意平铺背景：它是由重复的 png 文件制成的，并且始终与页面上的元素完美定位。这表明这是可能的.. 但是有人知道他们是怎么做到的吗？

【问题讨论】：

【解决方案1】：

在我看来，你有两个选择：

1) 调整用户窗口的大小直到最接近的偶数（发生调整大小时），类似于 http://jsfiddle.net/hATKW/

2) 使用固定宽度和媒体查询来处理多个大小的窗口，请在此处阅读媒体查询：http://css-tricks.com/6731-css-media-queries/

谢谢，狮子座

【讨论】：

【解决方案2】：

本网站使用 20x20 像素（偶数）的背景图片。你可以使用

body {
min-width:400px;
}

在这个宽度上，1px 的偏移几乎无法检测到，如果用户重新调整到更大的窗口大小，差异将几乎看不到。

不过，我不太确定您的问题。您在问题中谈论 element，而不是背景。如果您提供您的网站链接，将会很有帮助。

【讨论】：

嗯嗯..为了学习起见，让我们以这个站点为例（我的只是在本地服务器上）。 @simple geo 当您缓慢（逐个像素地）调整窗口大小时，您会注意到元素移动了一半时间。这允许背景图块继续构成页面上元素的边框。如果不是这种情况，关闭一个像素将意味着生成的边框将关闭 - 这可能非常明显。我说的有道理吗？
还有 1px 的差异。它只是没有出现那么大的交易。你的实际场景很重要，因为你想保持 element 的大小而不是背景。