溢出时字段集图例无法正确显示答案

【问题标题】：Fieldset legend doesn't show properly when overflow溢出时字段集图例无法正确显示
【发布时间】：2015-05-25 15:59:07
【问题描述】：

我有一个带有图例的字段集，如下所示

<fieldset class="fieldsetStyle">
            <legend class="fieldsetLegendStyle">

                <div>
                     <h:outputText value="#{msgs.LABEL_AJOUTER_UTILISATEUR}"
                         rendered="#{gProfilCtrl.newUtilisateur}"/>
                     <h:outputText value="#{msgs.LABEL_MODIFIER_UTILISATEUR}"
                         rendered="#{!gProfilCtrl.newUtilisateur}"/>
                </div>

            </legend>
.
.
.
</fieldset>

当我在我的 CSS 文件中将 overflow 属性设置为 auto 时，图例无法正确显示。顶部边框消失，这仅在 Chrome 浏览器中。 Firefox 和 IE 完美运行。

这是我的 CSS 描述：

.fieldsetStyle {
    height: calc(100% - 2px);
    border: 1px solid #bed6f8;
    margin-left: 5px;
    padding: 0 0 0 30px;
    width: calc(100% - 37px);
    margin-right: 0px;
    overflow: auto;
}

.fieldsetLegendStyle {
    border: 1px;
    border-style: solid;
    border-color: #BED6F8;
    min-width: 199px;
    height: 25px;
    padding-top: 10px;
    margin-bottom: 20px;

}

有什么想法吗？

更新

当我没有设置overflow:auto 时，我的面板会从字段集框溢出。

【问题讨论】：

删除 overflow: auto; 似乎有效 - jsfiddle.net/wmf448Ls
我需要设置溢出，因为有时内容会溢出我的字段集的框。
如何将
包装成
并在 div 上设置 overflow:auto ？
我只是用
包裹了
而没有设置 overflow:auto 解决了这个问题。谢谢。
太棒了！表单元素通常很难设置样式，尤其是在处理跨浏览器和操作系统时。