MVC 视图 - 输入选择器位置在 Firefox 中正确，但在 Chrome 中不正确？答案

【问题标题】：MVC View - Input selectors position is correct in Firefox but not in Chrome?MVC 视图 - 输入选择器位置在 Firefox 中正确，但在 Chrome 中不正确？
【发布时间】：2015-07-19 23:53:00
【问题描述】：

问题背景：

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

问题：

当我查看产品详细信息视图时，左侧输入选择器在 Firefox 中正确定位在输入旁边，但在 Chrome 中却没有。以下图片显示了两个浏览器之间的问题和差异：

火狐：

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

Chrome：

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

代码：

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

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

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

【问题讨论】：

使用浏览器工具检查 CSS 中的元素
@StephenMuecke 有趣的是，在 Chrome 中打开开发者控制台会导致页面右侧出现垂直滚动条，这足以将输入框推过去并在选择器和输入框之间形成间隙甚至像在 FireFox 上一样。我在样式中是否遗漏了一些明显的东西？
这个问题和asp.net MVC没有任何关系。这是一个 CSS/引导程序/浏览器问题。
它不在您的 html 中。它在您的 CSS 样式中。
试试Bootlinting你的HTML。

标签： html css twitter-bootstrap google-chrome

【解决方案1】：

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

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

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

MDN on box-sizing

【讨论】：