Firefox 3.6中的Overflow: hidden问题

Question

我做了一个表单脚本，这样我需要表单时就可以随时使用，但是我注意到当我设置字段的属性为溢出隐藏时，在Firefox（在3.6中测试）中仍然可见。

我发现还有超过5%的用户在使用FF 3.6，所以我需要解决这个问题。我在Google上搜索了一下，但他们提供的所有解决方案都没有帮助我解决这个bug... 链接到jsFiddle 我在JS fiddle上制作了表单的一部分，如果你可以在Chrome、IE 6+和FF 3.6中进行测试，你会看到差异（当你点击复选框时，隐藏的内容应该显示出来）。

请问有人可以帮忙吗？

Sander

- Rednas

---

你能告诉我们在不同的浏览器中应该测试什么吗？请适当地解释你的问题，这样我们才能帮助你解决问题，而不是浪费时间去寻找问题。 - Murtaza

但我注意到，当我为一个字段设置overflow hidden属性时，在FF中它仍然可见（我在3.6中进行了测试）。 - Rednas

为什么不直接使用display:none而不是隐藏溢出？ - My Head Hurts

因为我需要滑动效果的溢出隐藏。 - Rednas

你仍然可以使用 display: none; 来实现幻灯片效果。 - My Head Hurts

你能给我展示一下吗？（你可以在 JSFriggle 上编辑我的代码） - Rednas

Answer 1

看起来这是一个Mozilla的bug，已经持续了7年之久（报告时间为2004-09-22）：

https://bugzilla.mozilla.org/show_bug.cgi?id=261037

问题

当给fieldset指定固定的高度或宽度时（无论你设置为多少），overflow总是被视为overflow: visible。

解决方法

你可以使用display:none隐藏fieldset内容，或者如果你想继续使用overflow:hidden的方法，那么你可以将元素从fieldset更改为div，或者将fieldset嵌套在另一个带有属性overflow:hidden的div中。

嵌套的fieldset示例：http://jsfiddle.net/8nbuj/8/

- My Head Hurts