Вставка теневого CSS с помощью <fieldset>. Firefox против Chrome

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

В firefox это выглядит так:

Я обнаружил, что удаление boxshadow из CSS верхнего раздела, выше границы поля, исчезает в 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;
}

Ответ 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. Однако он не знает размещения легенд, и вам нужно установить его с отрицательными полями.

Ответ 2

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

fieldset  
{
    padding-top: 14px;
}

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

Ответ 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;
}