我的网站上填写的表单有问题.
如果我已经设置了一个高度/宽度到一个表单元素,然后添加一个填充.在我尝试过的所有浏览器中,除了Firefox,padding被添加到height / width.
如果我已经设置了一个高度/宽度到一个表单元素,然后添加一个填充.在我尝试过的所有浏览器中,除了Firefox,padding被添加到height / width.
如果我的输入宽度为200,高度为20像素.并且填充为5(所有方式),总和宽度和高度将为210像素和30像素,但在Firefox中它是200像素和20像素.
我该如何解决这个问题?
解决方法
给这个CSS的输入:
Box-sizing: border-Box;
您可以在QuirksMode,the W3C spec和MDN上阅读有关框大小的更多信息.这是its browser support.如果目标浏览器需要,请使用前缀-moz-或-webkit-.
这个答案曾经提到过,我通过使用Chrome Web Inspector中的向上/向下箭头键找到了最初的值.但事实证明,initial
是一个CSS关键字,适用于任何属性,表示属性的初始值 – 浏览器的默认值.初始化比明确命名要使用哪个框模型更安全.如果指定了Box-sizing:initial,并且浏览器的Box-sizing的默认值改变了,输入的填充可能会再次破裂.