和之间的盒子模型不一致

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:

我意识到有一个边框框模型,而有一个内容框框模型。 IE8和FF中存在此行为。不幸的是,这使我无法将这种风格应用于大小均匀的输入:

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

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

这是IE和FF的正确行为吗?是否存在跨浏览器解决此问题的方法?

4 个解决方案

#1

Is this correct behaviour by IE and FF?

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

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.

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

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

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

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

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

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

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

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

#2

You have two options to solve this problem 1)if you write css code for input,it applies for every input element.Instead of using this for evert one of them,just do for specific types

你有两个选择来解决这个问题1)如果你为输入编写css代码,它适用于每个输入元素。而不是使用它来替换其中一个,只针对特定类型

input[type="submit"],input[type="text"]
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

2)I always use class declarations after I reset known tag names.

2)在重置已知标签名称后,我总是使用类声明。

.MySubmit
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

and use it like

并使用它

<input type="submit" class="MySubmit" />

I hope this helps.

我希望这有帮助。

#3

There is a css only fix for it

只有一个css修复它

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0;  padding:0 15px 0 15px; }
/*ie9*/ div.search input[type="text"] {   border-left: 25px solid transparent; }
/*ie8*/ div.search input[type="text"] {   border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;}

Thanks Muhammad Atif Chughtai

感谢Muhammad Atif Chughtai

#4

I've used this CSS solution to get identical button and text heights; it works in IE, FF and Chrome. Basically, the idea is to force the height of input elements to larger than the default box height. Do this for both text and button:

我已经使用这个CSS解决方案来获得相同的按钮和文本高度;它适用于IE,FF和Chrome。基本上,我们的想法是强制输入元素的高度大于默认的盒子高度。对文本和按钮执行此操作:

Set margins and padding to 0. This gives smallest possible "natural" box.

将边距和填充设置为0.这样可以提供最小的“自然”框。

Set vertical-align to middle. This compensates for padding=0 to get whitespace above/below text.

将vertical-align设置为middle。这会补偿padding = 0以获得高于/低于文本的空格。

Use height/width to control dimensions of text and button. Text height must be several pixels greater than font height (to override default box dimensions). Height of button must be 2 pixels greater than text (due to differences between text and button box models).

使用高度/宽度来控制文本和按钮的尺寸。文本高度必须比字体高度大几个像素(以覆盖默认的框尺寸)。按钮的高度必须比文本大2个像素(由于文本和按钮框模型之间的差异)。

Example:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }

#1