溢出时，Fieldset图例无法正确显示

Question

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

<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我的面板从字段集框溢出时。

Answer 1

您可以尝试将<%=TextBox_firstname.ClientID%>包装到<fieldset>中，并在div元素上设置相关的样式。

或许，您可以将<div>向下移动一个像素，以显示顶部边框。

<legend>