存在legend时无法为fieldset设置height:0致Bootstrap折叠动画异常

背景 #

我有一个包含可折叠fieldset的表单，每个复选框借助Bootstrap-Collapse来展开对应fieldset。

异常现象 #

带有 legend的fieldset无法顺滑展开/折叠，而不带 legend的fieldset折叠动画运行正常。

已知信息 #

• Bootstrap通过overflow: hidden; height: 0;实现折叠元素的动画效果
• 当fieldset存在legend元素时，浏览器无法将fieldset的高度真正设置为0
• 因此折叠动画只会运行到仅legend可见的状态，之后直接触发显隐切换，没有过渡效果

更新：解决方案 #

使用float属性将legend从fieldset的常规文档流中脱离即可解决，可自行调试验证，该思路由@beni-sinca提供。

内容的提问来源于stack exchange，提问作者vaxul