MVC视图 - 输入选择器位置在Firefox中是正确的但在Chrome中不正确吗？

Question

问题背景：

我有一个电子商务网站，其中有一个产品详细信息页面，用户可以在其中选择他们希望放入购物篮中的商品数量。

问题：

当我查看“产品详细信息”视图时，左侧输入选择器正确位于Firefox中的输入旁边，而不是Chrome中。以下图片显示了问题以及两种浏览器之间的差异：

火狐：

箭头绿色显示左选择器如何正确定位在输入旁边。

铬：

黑色箭头在Chrome中显示左侧选择器不完美地位于输入旁边 - 请注意宽度的增加：

代码：

此输入选择器的HTML很简单，如下所示：

<div class="col-sm-6 form-group">
    <input id="productQty" type="text" value="1" name="demo1" class="form-control">
</div>

任何帮助解决为什么Chrome中的这种定位错误都会很棒。

Answer 1

实际上它完全位于输入旁边。它们是逐个像素的。在Firefox中，其中一个与另一个重叠1px。

不同浏览器对边框，填充和边距的处理方式略有不同。通常使用box-sizing css属性可以解决这些问题。

如果您发布与这些元素相关的css，则可以给出更具体的解决方案。

MDN on box-sizing