css – 在Firefox和Opera / Chrome / IE中形成填充差异

前端之家收集整理的这篇文章主要介绍了css – 在Firefox和Opera / Chrome / IE中形成填充差异前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的网站上填写的表单有问题.
如果我已经设置了一个高度/宽度到一个表单元素,然后添加一个填充.在我尝试过的所有浏览器中,除了Firefox,padding被添加到height / width.

如果我的输入宽度为200,高度为20像素.并且填充为5(所有方式),总和宽度和高度将为210像素和30像素,但在Firefox中它是200像素和20像素.

我该如何解决这个问题?

解决方法

给这个CSS的输入:
Box-sizing: border-Box;

您可以在QuirksMode,the W3C specMDN上阅读有关框大小的更多信息.这是its browser support.如果目标浏览器需要,请使用前缀-moz-或-webkit-.

这个答案曾经提到过,我通过使用Chrome Web Inspector中的向上/向下箭头键找到了最初的值.但事实证明,initial是一个CSS关键字,适用于任何属性,表示属性的初始值 – 浏览器的默认值.初始化比明确命名要使用哪个框模型更安全.如果指定了Box-sizing:initial,并且浏览器的Box-sizing的默认值改变了,输入的填充可能会再次破裂.

猜你在找的CSS相关文章