Css 变换比例时宽度不一致

为什么两个矩形的宽度不同

第一个是：

• 1%宽度
• 50倍刻度

第二个是：

• 100%宽度
• .5倍刻度

1*50=50和100*5=50，否

正文{
利润率：10px 30px；
}
#盒子{
宽度：439px；
高度：200px；
边框：1px纯黑；
框大小：边框框；
}
.线路{
高度：10px；
变换原点：左；
}
#例1{
宽度：1%；
变换：scaleX（50）；
背景色：红色；
}
#例2{
宽度：100%；
变换：scaleX（.5）；
背景颜色：蓝色；
}

---

至少在Chrome中，这种行为似乎是因为计算百分比值的像素当量的方式

• #example1

  的大小是437px+的1%，正好是4.37px，但看起来像是Chrome（可能还有其他浏览器）将该值四舍五入到最接近的整数。由于这种舍入，当您将其放大50倍时，宽度仅为200px
• 当您将父级大小增加到459px时，您可以看到

  #example1

  行变为250px宽，因为4.57被四舍五入到5px

• #example2

  的大小为437px（100%），当缩小到0.5时，宽度变为218.5px。任何小于0.5的值似乎都会向下舍入，而任何等于或高于0.5的值都会向上舍入，因此这里的宽度变为219px
• 由于上述原因，您可以看到元素宽度之间的差异为19px。在代码片段中，我添加了其他几行像素值，以供参考。绿色的宽218px，黄色的宽200px，紫色的宽218.4px，巧克力宽219px，棕色宽218.5px。你可以看到绿色和紫色的宽度是一样的，而巧克力和棕色的宽度是1倍
• 如果将容器宽度设置为100的倍数，则此问题将消失。请参阅代码段中的第二个块。注意，它仍然有一个小偏差，因为

  边界设置为498px的1%是5px（因此50倍是250px），但是.5倍498px是249px。如果删除
  边框
  （或“框大小调整”）并将父容器的大小设置为100的倍数，则可以看到它完全匹配

+437px，因为即使我们说100%，两边的

边框宽度

被排除在

框大小：边框框

之外

正文{
利润率：10px 30px；
}
#盒子{
宽度：439px；
高度：200px；
边框：1px纯黑；
框大小：边框框；
}
.线路{
高度：10px；
变换原点：左；
}
#例1{
宽度：1%；
变换：scaleX（50）；
背景色：红色；
}
#例2{
宽度：100%；
变换：scaleX（.5）；
背景颜色：蓝色；
}
#例3{
宽度：218px；
背景颜色：绿色；
}
#例4{
宽度：200px；
背景颜色：黄色；
}
#例5{
宽度：218.5px；
背景颜色：棕色；
}
#例6{
宽度：219px；
背景颜色：巧克力色；
}
#例7{
宽度：218.4px；
背景颜色：紫色；
}
#框2{
宽度：500px；
高度：200px；
边框：1px纯黑；
框大小：边框框；
}

在chrome中，我认为这是因为439px的50%是219px（四舍五入到最接近的像素），而439px的1%看起来是4px和（因此50倍=200px）。因此，尺寸上有19像素的差异。尝试将100的倍数设置为基本大小，它们应该相等。（编辑：嗯，差不多了。仍然有一个小差异，我不知道为什么）。我有一种感觉，这与边距有关……但很有趣。好的，刚刚发现在Chrome中，设置100的倍数会导致一个小差异，因为父级上的

边框

，因为

框大小

，内容只得到x*100-2px作为100%（如Wes Foster的回答中所述）。主要的问题是像素大小的计算。所以，给这个问题增加一点目的。我试图通过修改元素的宽度，使元素的宽度成为固定值，然后修改元素的scaleX来提高动画性能。使用100%宽度并缩小比例是唯一可以接受的方法吗？@SeanAnderson:我不能肯定地说，但我建议使用100%宽度并缩小比例，因为缩放发生在一个似乎能够处理亚像素渲染的图形层中（参考我在回答中提到的模糊区域）而1%的宽度计算发生在渲染层本身，它似乎无法处理亚像素值。是的，我同意！不是很直观，但一旦布置好，一切都有意义。是的@SeanAnderson。我已经读了一周左右关于渲染的东西，这似乎是合适的。我将编辑答案，如果我设法找到任何更多的信息从权威来源。