2

再次编辑：它们在某些缩放级别看起来相同，但放大和缩小显示差异。FF 的默认缩放使它们看起来不正确，Chrome 的默认看起来还可以，但放大后会发现差异。

编辑：这是一个 jsfiddle http://jsfiddle.net/eHRkb/

情况如下：我的基本“单位”是一个 50px x 50px 的正方形。

我有一个 48x98 的 div，边框为 1，总大小为 50x100，所以它是 1x2。

我有一个 48x48 的 div，边框为 1，总大小为 50x50，所以这是一个 1x1。

我有一个 50x100 的 div，边框为 0，总大小为 50x100。那是 1x2 容器，旨在容纳 2 个 1x1 div。

我想在彼此的顶部显示两个 1x1，并在右侧显示一个 1x2。这是通过将 2 个 1x1 div 放入容器中来实现的，而 1x2 和 1x2 容器都是float:left，所以它应该如下所示：

|[X]||   |
|[X]||   |

我遇到的问题是左侧的 div 容器似乎比右侧的 div 短 1 个像素。它们的高度都是 100px，包括边框，所以我不确定出了什么问题，因为它们的高度应该是相同的，对吧？下面是我的 CSS 和 HTML。

CSS

.tile1x1
{
    width:48px;
    height:48px;
    float:left;
}

.tile1x2
{
    width:48px;
    height:98px;
    float:left;
}

.tile1x2Container
{
    width:50px;
    height:100px;
    float:left;
    border:none;
}

.border1
{
    border:1px solid black;
}

HTML

<div class="tile1x2Container">
<div class="tile1x1 border1"></div>
<div class="tile1x1 border1"></div>
</div>
<div class="tile1x2 border1"></div>

谢谢阅读！

4

2 回答 2

3

这是由缩放引起的舍入误差。

你有，在 1:1 缩放 50 + 50 = 100。

现在，如果您说 5:3 缩放，您将得到 83.33 + 83.33 = 166.66

当您将这些四舍五入为实际像素时，将变为 83 + 83 = 167 并且您有 1 个像素的差异。

于 2013-11-06T08:07:26.373 回答
2

我们可以使用 box-sizing 属性使其适合。为此，我们需要进行一些更改。

.tile1x1Thumb 的高度应该是 49 像素而不是 48 像素。

现在将以下内容添加到 .border1 中：

box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;

http://jsfiddle.net/eHRkb/1/

文档
框大小

于 2013-11-06T07:47:23.953 回答