问题背景:
我有一个电子商务网站,该网站有一个产品详细信息页面,用户可以在其中选择他们希望将多少件商品放入购物车。
问题:
当我查看“产品详细信息” View 时,左输入选择器正确定位在 Firefox 中的输入旁边,但在 Chrome 中却没有。下图显示了问题以及两种浏览器之间的差异:
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 中的这种定位错误的原因,那就太好了。
最佳答案
实际上它完美地定位在输入旁边。它们是逐个像素并排的。在 Firefox 中,其中一个与另一个重叠 1px。
不同浏览器对边框、填充和边距的处理略有不同。通常使用 box-sizing css 属性可以解决这些问题。
如果您发布与这些元素相关的 css,则可以提供更具体的解决方案。
关于html - MVC View - 输入选择器位置在 Firefox 中正确但在 Chrome 中不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30134426/