Легенда в форме работает правильно в 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

Где находится .slistbar в вашей разметке? элементы, содержащиеся в .slistbar?

Я не уверен на 100%, почему он работает в сафари, но form.rl, form.slistbar fieldset не применяет стиль к fieldset в form.rl и form.slistbar, он применяет его к form.rl (как в сам элемент формы) и fieldset элементов в form.slistbar.

Вы, вероятно, хотите сделать что-то вроде:

form.rl fieldset, form.slistbar fieldset { ... и подобное для остальных ваших стилей.

Answer 2

Оператор группировки , работает не так.Запятая , будет разделять несколько селекторов , каждый из которых должен быть действительным и полностью определенным.( Демо )

Таким образом, вместо

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 создает стандарты / рекомендации на американском английском .