<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

这是IE和FF的正确行为吗？

标准中没有真正说明如何通过CSS控制表单字段装饰.最初它们被实现为OS小部件,在这种情况下,边框大小调整是有意义的.后来的浏览器迁移到使用CSS border/padding/etc.渲染小部件本身,在这种情况下,内容框大小调整是有意义的.某些浏览器(IE)将表单字段作为两者的混合呈现,这意味着您最终可以选择不与文本字段对齐的选择框.

是否存在跨浏览器解决此问题的方法？

关于您可以做的最好的事情是告诉浏览器使用CSS3手动调整大小:

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

(在怪癖或兼容模式下,无法在IE6/7或IE8上运行.)