表单中的图例在Safari中正常工作，但在Mozilla中没有

Question

我的表单中的图例实际上不适合Mozilla浏览器，而它是在safari浏览器中，请问我该如何修复它，下面是标记语言，相关的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;
}

狩猎

Answer 1

grouping operator ,不能像这样工作。逗号,将分隔多个selectors，其中每个都必须有效且完全定义。 （Demo）

所以而不是

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

你真的想要

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

因为您希望影响form.r1 label和form.slistbar label，而不是form.r1和form.slistbar label。 另请注意，它是color:而非colour，因为W3C正在美式英语中创建标准/推荐。

Answer 2

标记中的.slistbar在哪里？是.slistbar?

中包含的元素

我不是100％确定它为什么适用于Safari，但form.rl, form.slistbar fieldset不会将样式应用于fieldset和form.rl中的form.slistbar，它会应用它到form.rl中的fieldset（如表单元素本身）和form.slistbar元素。

你可能想做类似的事情：

form.rl fieldset, form.slistbar fieldset { ... 和其余的风格类似。