html - MVC View - 输入选择器位置在 Firefox 中正确但在 Chrome 中不正确?

标签 html css twitter-bootstrap google-chrome

问题背景:

我有一个电子商务网站,该网站有一个产品详细信息页面,用户可以在其中选择他们希望将多少件商品放入购物车。

问题:

当我查看“产品详细信息” View 时,左输入选择器正确定位在 Firefox 中的输入旁边,但在 Chrome 中却没有。下图显示了问题以及两种浏览器之间的差异:

FireFox:

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

Chrome:

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

enter image description here

代码:

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

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

如果能帮助解决 Chrome 中的这种定位错误的原因,那就太好了。

最佳答案

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

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

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

MDN on box-sizing

关于html - MVC View - 输入选择器位置在 Firefox 中正确但在 Chrome 中不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30134426/

相关文章:

javascript - JSFiddle 提供的额外 CSS

html - 避免在 SPAN 中使用 DIV - 最佳实践

css - 用于手机、平板电脑和桌面的 Bootstrap 网格布局

html - 应用于父元素而不是所选元素的效果

html - 使用 CSS 而不是 HTML 将图像与标题对齐

javascript - 在网页上包含不引人注目的信息的最佳方式

javascript - 区域扩大时改变图像

javascript - WebGL 中的结束 <li> 标签

css - 为什么要将 CSS 文件导入到 TypeScript 中?

html - 带有 Css/html 的垂直子菜单下拉菜单