Question

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

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

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

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

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

我的div为50x100，边框为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>

感谢阅读！

Answer 1

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

.tile1x1Thumb的高度应为49px而不是48px。

现在将以下内容添加到.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/

<强>文档
box-sizing

Answer 2

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

你有1：1变焦50 + 50 = 100。

现在，如果你说，5：3变焦，你会得到83.33 + 83.33 = 166.66

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

“应该”具有相同高度的2个div，但是一个看起来像是比另一个大的像素

2 个答案: