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

问题描述

我意识到< 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的正确行为吗？

解决方案

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

在标准中没有真正说明表单字段装饰是如何由CSS控制的。最初，他们被实现为操作系统小部件，在这种情况下边框框大小是有意义的。后来的浏览器迁移到使用CSS边框/填充/等来渲染小部件本身，在这种情况下内容框大小是有意义的。一些浏览器（IE）将表单字段作为两者的混合，这意味着您可以选择不排列文本字段的框。

有这个问题的跨浏览器方法吗？

关于最好的方法是告诉浏览器希望手动使用CSS3：

  box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
  

（在处于怪异或兼容模式时，不适用于IE6 / 7或IE8。 / p>

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;
}

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

解决方案

Is this correct behaviour by IE and 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.

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:

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.)

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