一起CSS

当前位置:一起CSS > 前端技术 > 文章正文

隐藏域在ie中占空间的bug

日期:2010-07-7 分类:前端技术

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

<input />
<input class="hide" type="hidden" />
<input class="hide" type="hidden" />
……(省略 8 个或更多)
<input type="submit" value="send" />

这样的代码出现的几率是比较小吧,一般情况下,不会有这么多隐藏域,而且表单标签可能会有其他如 p、li 等标签包裹,这样的话,此 bug 又不会出现。我们抛开这些情况,以此 bug 会出现来讨论。上面代码运行后在 IE6IE7FF 中的效果如下图:

隐藏域在 ie 中占空间的示例图片

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

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

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

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

上面的几种方法虽然可以解决这个问题,但个人认为都不是很完美,如果你有更好的办法,欢迎留言。

查看:637 评论:2 标签:,,

相关日志

共有 2 条评论

  • afc163 说:

    把所有隐藏域写在同一行里

    应该不只是隐藏域的问题,是否可以理解为换行符所形成的TextNode占用空间的问题。

    • 青色 说:

      你的总结一针见血。我对节点没多少了解,所以不知道怎么说。
      你的博客我好像以前见过。

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved