IE6/IE7输入提交框模型困境

Question

今天，我在创建一个泛型按钮类来样式化从div到input的所有东西时，遇到了一些奇怪的bug。当涉及到inputtype=submit时，似乎大多数浏览器都使用不同的框模型。

大多数现代浏览器(ie9+、ff、chrome等)除了submit之外的所有输入都使用content-box模型，如果我没弄错的话，submit使用的是边框。

基本上，如果我将高度设置为100，所有的填充都设置为10，那么除了提交之外的所有输入的高度都将是120，而提交的高度将是100。

使用框大小调整及其浏览器前缀可以很容易地解决此问题。但我的问题是IE6/7做了同样的事情，但不支持盒子大小……

所以现在我所有的输入都显示了完整的高度，除了submit，它被切成两半。我有什么选项来强制内容框或除条件注释之外的另一个修复？

Answer 1

IE的旧“坏”盒子模型本质上是content-box。在IE>5中，文档需要处于quirks模式，IE才能使用它。您可以通过执行以下操作之一触发quirks模式(according to wikipedia)：

• 当文档类型声明不存在或不完整时；
• 当遇到HTML3或更早版本的文档时
• 当使用HTML4.0过渡或框架集文档类型声明并且系统标识符(URI)不存在时
• 当SGML注释或其他无法识别的内容出现在文档类型declaration
• When之前时文档中的任何位置都有错误

<代码>F213

当然，这可能会带来更多的麻烦，因为它会让所有东西都使用IE box模型(content-box)。我可以看到这是有用的，但如果您的布局不是以这种方式构建的，那么返回并更改它可能会有太多的工作要做。

我做了一些搜索，没有找到任何可以在某些元素上启用旧盒子模型的东西，而不是其他元素。

在过去处理过IE6/7之后，如果不使用条件注释或css hack，就没有办法绕过它的buggy行为。与其他浏览器相比，它的渲染引擎只是从根本上被打破了。试图让它在没有任何黑客攻击的情况下运行，这只会让人头疼。

我能想到的唯一另一件事是用span或div将每个表单元素括起来，并使用它们来帮助调整表单元素的大小。这也很糟糕，但它的优点是至少可以在每个浏览器中工作。