Question

在带有图例的字段集上使用边界半径时遇到了麻烦。与IE以外的所有桌面浏览器都可以正常工作。使用IE时，不会四舍五入。如果我删除图例，则菲尔赛特的角落是圆的。

我找到了以下CSS修复程序，但由于需要使用float并调整图例上的上边距而显得有些困惑：

    <style type="text/css" >
    fieldset, legend {
        margin:20px;
        padding:0 10px 10px;
        border:1px solid #666;
        border-radius:8px;
        box-shadow:0 0 10px #666;
        padding-top:10px;
 }  

legend {
        padding:2px 4px;
        background:#fff; 
    }


    fieldset > legend {
        float:left;
        margin-top:-20px;
    }
    fieldset > legend + * {
        clear:both;
    }
    </style>

有人知道“清洁”的替代品吗？

顺便说一句：如果可以的话，我正在使用Bootstrap 4。

添加的HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css" >
    fieldset, legend {

        border:1px solid #666;
        border-radius:8px;


 }  

legend {
        padding:2px 4px;
        background:#fff; 
    }


    fieldset > legend {
        float:left;
        margin-top:-20px;
    }
    fieldset > legend + * {
        clear:both;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset>
            <legend>Legend</legend>
            <br />
          <p>Fieldset</p>
          <p>Content</p>
          <p>Stuff</p>
        </fieldset>
    </div>
    </form>
</body>
</html>

IE中，图例的Border Radius不适用于Fieldset

0 个答案: