input - <input type ="submit"/> 和 <input type ="text"/> 之间的盒模型不一致

Question

我意识到 <input type="submit"/>有一个 border-box盒子模型，而<input type="text"/>有一个 content-box盒子模型。此行为存在于 IE8 和 FF 中。不幸的是，这使我无法将这种样式应用于大小均匀的输入:

input, textarea
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

这是 IE 和 FF 的正确行为吗？有没有跨浏览器的方法来解决这个问题？

Answer 1

Is this correct behaviour by IE and FF?

标准中并没有真正说明表单字段装饰是如何由 CSS 控制的。最初它们是作为操作系统小部件实现的，在这种情况下，边框大小调整是有意义的。后来的浏览器迁移到使用 CSS 边框/填充等来呈现小部件本身，在这种情况下，内容框的大小会有意义。一些浏览器 (IE) 将表单字段呈现为两者的混合，这意味着您最终可能会选择框不与文本字段对齐。

And is there a cross-browser way around this problem?

关于您能做的最好的事情就是使用 CSS3 手动告诉浏览器您想要哪种尺寸:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

(无法在 IE6/7 或 IE8 上工作，当处于怪癖或兼容模式时。)