Javascript 浏览器将边框值截断为整数

每当元素的边框使用非整数像素值时，浏览器只需将该值截断为整数。为什么会这样

我知道边界实际上不会占用像素的一部分，但这些类型的值有时会与其他类型的值结合使用，以形成完整的像素。例如，宽度为1.6px的左右边框应使元素的总宽度增加3px。这是因为

但是，渲染边框时似乎不是这样，即使宽度、填充和边距的行为都正确

var div=document.getElementsByTagName（'div'），
len=分段长度，
风格
对于（变量i=0；iheight:'+style.getPropertyValue（'height'）；
}

div{
宽度：300px；
边框：1px纯黑；
填充：50px0；
文本对齐：居中；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
等宽{
宽度：300.6px；
}
顶舱{
垫面：50.6px；
}
页边空白处{
边际上限：0.6px；
}
div.border-top-width{
边框顶部宽度：1.6px；
}

---

从几个简单的测试中我可以看出，亚像素边框宽度的工作原理与它们应该的完全一样。我认为您示例中的一个输入错误（“边框顶部宽度”与“边框左侧宽度”）可能是造成差异的原因。这个例子对我来说效果很好：

var div=document.getElementsByTagName（“div”）；
对于（变量i=0；i

DIV
{
宽度：300px；
边框：1px纯黑；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
分区亚像素
{
边框宽度：1.23px；
}

边框宽度：1px
宽度：
边框宽度：1.23px
宽度：

简单的解释是浏览器在内部使用整数作为边框宽度（或者至少公开它们）

Chrome（Chrome）的源代码就是一个例子，它在ComputedStyle.h文件中将所有边框宽度定义为整数（）：

我们对此无能为力，至于原因：关于边界宽度的信息很少。它仅说明

线宽

，没有关于如何处理该单位的单位、类型或定义，但绝对（非负）：

值：
[…]
计算值：绝对长度；'如果边框样式为“无”或“隐藏”，则为“0”

以及：

与“薄”、“中”和“厚”对应的长度不相同 指定，但值在整个文档中是常量，并且 ≤ 中等≤ 厚的。例如，UA可以使厚度取决于 “中等”字体大小：选择“中等”字体时，可以选择1、3和5px 字体大小为17px或更小。不允许使用负值

发现相同的信息，但没有新的详细信息

由于所有值最终都是像素值（因为我们的屏幕是像素设备），当涉及到边界宽度时，em、vw、%等的数字似乎最终都是整数，而不考虑子像素化

在使用整数作为边框宽度的浏览器中，甚至变换（缩放）似乎都不会影响这一点

---

最后，如何处理这些值似乎取决于浏览器供应商（可能只是出于美学原因、性能……我们只能猜测……）

为什么不进行计算？@PHPglue边框值位于附带的css文件中，偶尔会被覆盖。要进行计算，我需要知道边界值是多少。问题是，当它应该返回大约1.6px时，它返回1px（在本例中）。不要对像素使用小数。@PHPglue这样的笼统语句无法确定。这类似于说“不要用正则表达式解析HTML”。正如我所说，“这些类型的值有时会与其他值结合使用，形成完整的像素”。在某些情况下，它是有意义的，在某些情况下它是荒谬的。你确定这不仅仅是你的例子中的打字错误（边框顶部宽度与边框左侧宽度）造成的吗？我在IE10中对其进行了测试，亚像素边框宽度的效果与预期一致。在您的示例中，我在Chrome中的宽度显示为不变：

width:300px

和

width:300px。然后它取决于浏览器，因为IE10说“宽度：298px”和“宽度：297.54px”。是的，我想是这样。Internet Explorer似乎是唯一一个正确使用它的浏览器（无可否认，这有点扭曲）。随着视网膜型显示器变得无处不在，像素不再是像素，我想浏览器将朝着支持所有东西的亚像素大小的方向发展，包括边框；但是现在我猜你一定是在告诉访问者使用IE:-）不过，奇怪的是，当框大小设置为border box时，Chrome显示的是300而不是298。我怀疑它的性能，因为它已经为其他属性使用了浮点值。至于美学，像素值不一定会改变它的外观，只是改变它的记忆方式。我看不出有什么好的理由来解释财产处理之间的不一致，但这个答案在其他方面是很好的。我会把悬赏留着看是否还有其他答案，但这似乎是一个不幸的事实。这可能不是性能问题，而是开发人员的习惯问题。开发人员倾向于使用最高效的数据类型（有充分的理由）。由于开发人员没有看到为边框添加非整数值的理由，他们选择了整数。这可能是html3/4
border=3
属性的产物，它只接受一个整数。