<input type="submit"/>之间不一致的框模型和 <input type="text"/> [英] Inconsistent box model between <input type="submit"/> and <input type="text" />

问题描述

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

I realised that <input type="submit"/> has a border-box box model, whereas <input type="text"/> has a content-box box model. This behavior is present in IE8 and FF. Unfortunately, this prevents me from applying this style for nice evenly sized inputs:

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

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

Is this correct behaviour by IE and FF? And is there a cross-browser way around this problem?

推荐答案

IE 和 FF 的行为是否正确?

Is this correct behaviour by IE and FF?

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

It's not really stated in the standard how form field decorations are controlled by CSS. Originally they were implementated as OS widgets, in which case border-box sizing would make sense. Later browsers migrated to rendering the widgets themselves using CSS borders/padding/etc., in which case the content-box sizing would make sense. Some browsers (IE) render form fields as a mix of both, which means you can end up with select boxes not lining up with text fields.

有没有跨浏览器的方法来解决这个问题?

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

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

About the best you can do is tell the browser which sizing you want manually using CSS3:

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

(在 IE6/7 或 IE8 下，在 quirks 或兼容模式下不起作用.)

(Won't work on IE6/7, or IE8 when in quirks or compatibility mode.)

这篇关于<input type="submit"/>之间不一致的框模型和 <input type="text"/>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！