Cuadro sombreado CSS con <fieldset>. Firefox vs Chrome

Question

Tengo un problema con CSS en Firefox. Un conjunto de campos que presta perfectamente en Chrome:

en Firefox se muestra así:

he descubierto que la eliminación de la boxshadow de la CSS la sección superior, por encima del borde de campos, desaparece en Firefox, pero luego no tengo la sombra. ¿Cómo pueden ponerlos a los dos?

Aquí está el código:

<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> 

Y el 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

Por cierto, muy agradable capturas en esto! Definitivamente un futuro-tipo-de-ayuda-de-pregunta.

En la huida rápida He encontrado una solución muy alternativa:

.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; 
} 

Y el ejemplo vivo: http://jsfiddle.net/xDE4x/1/

me fijo un poco de su sintaxis CSS (: en lugar de ; y etc). También agregué las versiones -moz- y -webkit- de la sintaxis de CSS3.

Seguiré cavando, pero este es el primer método .. Funciona muy bien y debería ser más compatible con el navegador que con las características de CSS3. Sin embargo, desactiva la ubicación de las leyendas y necesita establecerlas de nuevo con márgenes negativos.

Answer 2

También puede "flotar" la leyenda, no requiere tanto trabajo para mantener su diseño, especialmente cuando tiene más de un fieldset. En el caso interrogadores sería:

.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; 
} 

Answer 3

Lo que he hecho es fijar el margen superior a un valor negativo para la leyenda de modo que parece que tiene una altura cero al conjunto de campos; Luego apliqué un margen negativo en la dirección opuesta para compensar el primer margen negativo. Luego agregué relleno de igual valor al fieldset para que se posicionaran como lo harían normalmente.

fieldset 
{ 
    padding-top: 14px; 
} 

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