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的认值改变了,输入的填充可能会再次破裂.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效