Box shadow CSS con <fieldset>. Firefox vs Chrome

Question

Ho un problema con i CSS su Firefox. Un fieldset che rende perfettamente su Chrome:

In Firefox mostra in questo modo:

ho scoperto che la rimozione del boxshadow dal CSS sezione superiore, sopra il confine fieldset, scompare Firefox, ma poi non ho l'ombra. Come può metterli entrambi uguali?

Ecco il codice:

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

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

A proposito, molto bella cattura su questo! Sicuramente un tipo di domanda di aiuto futuro.

In fuga veloce ho trovato una soluzione molto 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; 
} 

E l'esempio vivo: http://jsfiddle.net/xDE4x/1/

ho risolto alcuni dei vostri sintassi CSS (: invece di ; ed ecc). Inoltre ho aggiunto le versioni -moz- e -webkit- della sintassi CSS3.

Continuerò a scavare, ma questo è il primo metodo .. Funziona benissimo e dovrebbe essere più compatibile con il browser delle funzionalità CSS3. Tuttavia, disinserisce il posizionamento delle legende ed è necessario reimpostarlo con margini negativi.

Answer 2

In alternativa è possibile "fluttuare" anche la legenda, non è necessario tanto lavoro per mantenere il layout in particolare quando si dispone di più di un fieldset. Nel caso interroganti sarebbe:

.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

Quello che ho fatto è impostare il margine superiore ad un valore negativo per la legenda in modo che risulti che quest'ultima ha un'altezza zero al fieldset; Ho quindi applicato un margine negativo nella direzione opposta per compensare il primo margine negativo. Ho quindi aggiunto padding di uguale valore al fieldset per farli posizionare come normalmente farebbero.

fieldset 
{ 
    padding-top: 14px; 
} 

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