博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
<input type="hidden" />在IE中占空间(转)
阅读量:6503 次
发布时间:2019-06-24

本文共 1074 字,大约阅读时间需要 3 分钟。

input 的 type 设为 hidden 的话,就是隐藏域(废话)。隐藏域在页面中不显示,但可以有值。既然是“隐藏”的,怎么还说会占空间呢。这是 IE 的 bug,不过这个 bug 的出现需要一定的条件,换句话说就是出现的几率比较低,所以可能很多人没有遇到过。那什么样的情况下会出现呢?看下面的代码:

 

   ……(省略 8 个或更多) 

这样的代码出现的几率是比较小吧,一般情况下,不会有这么多隐藏域,而且表单标签可能会有其他如 p、li 等标签包裹,这样的话,此 bug 又不会出现。

我们抛开这些情况,以此 bug 会出现来讨论。上面代码运行后在 IE6 或 IE7 和 FF 中的效果如下图:

在 IE6 或 IE7 中,输入框和提交按钮有很大的间隔,而在 FF 中则效果正常。如果隐藏域越多的话,IE6 或 IE7 中间隔就越大,而 FF 中则始终没有问题。你可以 查看Demo

 

解决此 bug 有以下几个办法:

把所有隐藏域写在同一行里
优点:不要借助其他标签,不要写样式
缺点:代码可读性下降
隐藏域浮动
优点:代码可读性好
缺点:需要借助 class,如果使用属性选择器的话,IE6 不支持
隐藏域绝对定位
优点:代码可读性好
缺点:需要借助 class,如果使用属性选择器的话,IE6 不支持

其实并不只是隐藏域会占空间,把 type 换成其他类型,同样会有这样的问题。比如把 type 换成 button,然后 display:none,效果是一样的。

-------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------

今天在IE8杂项模式下碰到这个问题,最开始是访问页面卡死,不能动,只能强制关闭IE

在调试过程发现样式错位问题,一直找不到原因,后来才发现删除form表单下的一列<input type="hidden" />后,页面正常,卡死问题也解决了

 

转载于:https://www.cnblogs.com/miharu/p/4131759.html

你可能感兴趣的文章
配置openssh实现sftp远程文件上传
查看>>
Java9 新特性 详解
查看>>
杂项-模板
查看>>
sqlite多表关联update
查看>>
内联元素空隙问题
查看>>
python数据分析及展示(二)
查看>>
VS2008设置快捷键Ctrl+W关闭当前打开的文本编辑器窗口
查看>>
详解MySQL数据类型
查看>>
2018网易在线笔试题
查看>>
【laravel5.4】重定向带参数
查看>>
PHP array_walk() 函数
查看>>
java基础-数组的折半查找原理
查看>>
mybatis标签之——<trim>
查看>>
【laravel5.4】 Composer移除依赖
查看>>
第7章 高级分组
查看>>
常见错误及细小知识点锦集
查看>>
【多线程】将大批量数据插入多张表,怎么知道多张表都插成功了
查看>>
SDOI2018:原题识别
查看>>
opencv中图像伪彩色处理(C++ / Python)
查看>>
点击按钮,删除数组-对象中的数据
查看>>