微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

原文地址:https://www.jb51.cc/css/217123.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。