css - Form 中的图例在 Safari 中可以正常工作，但在 Mozilla 中不能

Question

我表单中的图例实际上在 safari 浏览器中不适合 Mozilla 浏览器，请问我该如何解决，下面是标记语言，相关的 css 也在下面。我也附上了图片也一样。谢谢

  <div>
<form action='relogin.php' method='post' class='rl'>
<fieldset>
<legend>Login</legend>
    <div>
    <label for='username' class='fixedwidth'>Username</label>
    <input type='text' name='username' id='username'/>
    </div>

    <div>
    <label for='password' class='fixedwidth'>Password</label>
    <input type='password' name='password' id='password'/>
    </div>
<div class='buttonarea'>
    <input type='submit' value='Log in'/>
    </div>
<p>
<a href='reregister.php'>Register </a>
</p>
</fieldset>
</form>
</div>

CSS

form.rl,form.slistbar{
    padding:0;
    margin:0;
    margin-top:-15px;
    line-height:150%;

}

form.rl,form.slistbar label {
    font-weight:bold;
    font-size: small;
}

form.rl,form.slistbar label.fixedwidth{
    display:block;
    width: 240px;

}

form.rl,form.slistbar .buttonarea input{
colour: white;
font-weight; bold;
padding: 5px;
border: 1px solid white;
}

form.rl,form.slistbar fieldset{
border:2px solid navy;
padding:10px;
width: 150px;
margin-top:30px;
}

form.rl,form.slistbar legend{
font-weight:bold;
font-size: small;
colour: navy;
}

Safari

Answer 1

grouping operator ,不是这样工作的。逗号 , 将分隔多个 selectors , 它们中的每一个都必须有效且完全定义。 ( Demo )

所以代替

form.rl,form.slistbar label {
    /* ... */
}

你真的想要

form.rl label, form.slistbar label {
    /* ... */
}

因为你想影响form.r1标签和form.slistbar标签，而不是form.r1和form.slistbar标签。另请注意，它是 color:而不是 colour，因为 W3C 正在制定美式英语的标准/建议。