Коробка теневая CSS с <fieldset>. Firefox против Chrome

Question

У меня проблема с CSS в Firefox.Набор полей, который отлично отрисовывается в Chrome:

В Firefox это выглядит примерно так:

Я обнаружил, что удаление boxshadow из CSS вверхураздел над границей fieldset исчезает в Firefox, но тогда у меня нет тени.Как можно поставить их обоих одинаковыми?

Вот код:

<div id="wrapper" style="position: relative;">
        <fieldset style="width: 17em;" class="loginField"><legend align="right">Log in</legend>
        <table cellspacing="0" cellpadding="0" class="loginVerticalPanel" style="height: auto;">
            <tbody>
                <tr>
                    <td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Username:</div></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><input type="text" class="gwt-TextBox" style="height: auto; width: 100%;"></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Password:</div></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><input type="password" class="gwt-PasswordTextBox" style="height: auto; width: 100%;"></td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;">
                        <table cellspacing="0" cellpadding="0" style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td align="left" style="vertical-align: top;">
                                        <img class="gwt-Image" title="Loading" style="display: none;" alt="Loading" src="assets/square_circles.gif">
                                    </td>
                                    <td align="right" style="vertical-align: top;">
                                        <button type="button" class="loginButton" style="height: 25px;">&gt;&gt;&nbsp;&nbsp;&nbsp;GO</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="left" style="vertical-align: top;"><div class="loginWarning" style="display: none; width: 100%;"></div></td>
                </tr>
            </tbody>
        </table>
        </fieldset>
    </div>

И CSS:

.loginButton {
    background: -moz-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
    border: 1px solid #093C75;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-right: -1em;
    margin-top: 1em;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 0 1px 1px #333333;
    text-transform: uppercase;

}
.loginButton:hover {
            background: -moz-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
            background: -webkit-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
        border-color: #093C75;
        text-decoration: none;
}
.loginButton:active {
    background: -moz-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
    border-color: #093C75;
    outline: medium none;;  
}
.loginWarning {
    padding-top: 0.2em;
    font-family: 'Aldrich', sans-serif;
    color:#FE2E2E;
    font-size: 12px;
    font-weight: 400;
}
.loginField {
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    border: 0;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border: 1px solid #AAAAAA;
        border-radius: 10px 10px 10px 10px;
            box-shadow: 0 0 15px #AAAAAA;
        margin: 60px auto 0;
        padding: 20px;
}
.loginField legend {
    text-align: right;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
            box-shadow: 0 0 15px #AAAAAA;
    padding-right: 1em;
    padding-left: 1em:
}
.loginField img {
    max-width: 24px;
}

.loginVerticalPanel {
    margin: 0 auto 0 auto;      
}
.loginVerticalPanel input {
    background: -webkit-linear-gradient(90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #FFFFFF, #EEEEEE) repeat scroll 0 0 transparent;
    border: 1px solid #AAAAAA;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 3px #AAAAAA;
    padding: 5px;
}

Answer 1

Кстати, очень приятно ловить на этом!Определенно вопрос типа справки о будущем.

При быстром запуске я нашел очень альтернативное исправление:

.loginField legend {
    text-align: right;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 0 0 15px #AAAAAA;
    -moz-box-shadow: 0 0 15px #AAAAAA;
    box-shadow: 0 0 15px #AAAAAA;
    padding-right: 1em;
    padding-left: 1em;
    position: absolute;
    margin: -30px 0px 0px 200px;
}

И живой пример: http://jsfiddle.net/xDE4x/1/

Я исправил некоторые из ваших синтаксисов CSS (: вместо ; и т. Д.).Также я добавил -moz- и -webkit- версии синтаксиса CSS3.

Я буду продолжать копать, но это первый метод ... Он отлично работает и должен быть более совместимым с браузером, чем ваши функции CSS3 ..Тем не менее, он отменяет размещение легенд, и вам нужно установить его обратно с отрицательными полями.

Answer 2

Что я сделал, так это установил для поля отступа отрицательное значение легенды, чтобы оказалось, что оно имеет нулевую высоту относительно набора полей; Затем я применил отрицательную маржу в противоположном направлении, чтобы компенсировать первую отрицательную маржу. Затем я добавил отступы равного значения в набор полей, чтобы расположить их так, как обычно.

fieldset  
{
    padding-top: 14px;
}

fieldset legend  
{    
    margin-top: -14px;
    margin-bottom: -14px;
}

Answer 3

В качестве альтернативы вы также можете «плавать» легенду, не требуя такой большой работы для поддержания вашего макета, особенно если у вас более одного набора полей.В случае спрашивающих это будет:

.loginField legend {
    float: right;
    margin-top: -30px;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px #AAAAAA;
    padding-right: 1em;
    padding-left: 1em;
}