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

发布时间:2020-09-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了html – IE6 / IE7输入提交框模型困境编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我今天遇到一些奇怪的错误,当我创建一个通用按钮类来设置从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输入提交框模型困境所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!