html – IE6IE7输入提交框模型困境

概述我今天遇到一些奇怪的错误,当我创建一个通用按钮类来设置从div到输入的所有内容.在输入[type = submit]时,似乎大多数浏览器使用不同的盒子模型. 大多数现代浏览器(ie9,ff,chrome等)使用内容框模型用于所有输入,除了提交使用border-box如果我没有弄错. 基本上,如果我将高度设置为100并且填充为10,则除了提交之外的所有输入的高度将为120,其中提交的高度将为100. 我今天遇到一些奇怪的错误,当我创建一个通用按钮类来设置从div到输入的所有内容.在输入[type = submit]时,似乎大多数浏览器使用不同的盒子模型.

大多数现代浏览器(IE9,ff,Chrome等)使用内容框模型用于所有输入,除了提交使用border-Box如果我没有弄错.

基本上,如果我将高度设置为100并且填充为10,则除了提交之外的所有输入的高度将为120,其中提交的高度将为100.

使用Box-sizing及其浏览器前缀可以轻松修复此问题.但我的问题是ie6 / 7做同样的事情,但不支持大小调整…

所以现在我的所有输入都显示全高,除了提交被切成两半.除了条件注释之外,我还有哪些选项可以强制使用内容框或其他修复？

解决方法 IE的旧“破”盒模型本质上是内容盒.在IE> 5中,文档需要处于怪异模式以供IE使用.您可以通过执行以下 *** 作之一( according to wikipedia)来触发怪异模式：

>当文档类型声明不存在或不完整时;
>遇到HTML 3或更早版本的文档时
>使用HTML 4.0 Transitional或Frameset文档类型声明时和
系统标识符(URI)不存在
>当SGML评论或其他
无法识别的内容出现在文档类型声明之前
>当文档中的任何位置出现错误时

当然,这可能比它的价值更麻烦,因为它会使一切都使用IE盒子模型(内容盒).我可以看到这很有用,但是如果你的布局不是这样构建的,那么返回并改变它可能需要做太多的工作.

我做了一些搜索,并没有找到任何能够在某些元素上启用旧盒子模型的东西,而不是其他元素.

在过去处理ie6 / 7之后,如果不使用条件注释或CSS Hacks之类的东西,就没有办法解决它的错误行为.与其他浏览器相比,它的渲染引擎从根本上被破坏了.试图让它在没有任何黑客行为的情况下行动只是要求头痛.

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

总结

以上是内存溢出为你收集整理的html – IE6 / IE7输入提交框模型困境全部内容，希望文章能够帮你解决html – IE6 / IE7输入提交框模型困境所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。