kutu gölge ve diğer renk efektleri çalışmıyor mozilla firefox

Question

Bootstrap modal sınıfı ile bir pop up kayıt formu oluşturduk. Ve formu doğrulamak için jQuery doğrulama motoru kullandım. Ve orada bir kutu gölgesi ekledim ve arka plan rengini ve rengini değiştirdim. Bu, Chrome ve Internet Explorer'da iyi çalışıyor ancak Firefox'ta çalışmıyor.

İşte burada benim form

<div class="modal fade" id="signupForm" data-backdrop="false" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content Popmodal"> 
      <div class="modal-header"> 
       <button type="button" class="close Popclose" data-dismiss="modal" aria-label=""> 
        <span>&times;</span> 
       </button> 
       <h4 class="modal-title Poptit">Sign Up</h4> 
      </div> 

      <div class="modal-body Popbody"> 
       <form class="form-horizontal" method="post" action="registration.php" id="reg-form"> 
        <div class="form-group"><br> 
         <label class="col-md-4 col-md-offset-1">User Name :</label> 
         <div class="col-md-5"> 
          <input type="text" placeholder="A name that you like to use" class="form-control input-sm popname validate[required]" name="uname" id="uname" data-errormessage-value-missing="Username is required !" data-prompt-position="bottomLeft:5,4"><br> 

         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1">Email :</label> 
         <div class="col-md-5"> 
          <input type="email" placeholder="Your email address" class="form-control input-sm popname validate[required,custom[email]]" name="mail" id="mail" data-errormessage-value-missing="Email is required !" data-errormessage-custom-error="Invalid email address !" data-prompt-position="bottomLeft:5,4"><br> 
         </div> 

        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1">Password :</label> 
         <div class="col-md-5"> 
          <input type="password" maxlength="15" placeholder="Password" class="form-control input-sm popname validate[required]" name="pass" id="pass" data-errormessage-value-missing="Password is required !" data-prompt-position="bottomLeft:5,4"><br> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="col-md-4 col-md-offset-1">Confirm Password :</label> 
         <div class="col-md-5"> 
          <input type="password" maxlength="15" placeholder="Confirm password" class="form-control input-sm popname validate[required,equals[pass]]" name="cpass" id="cpass" data-errormessage-value-missing="Confirm password is required !" data-errormessage-pattern-mismatch="Password fields do not match !" data-prompt-position="bottomLeft:5,4"><br> 
         </div> 
        </div> 

        <div class="form-group"> 
         <div class="col-md-2 col-md-offset-8"> 
          <button type="submit" class="btn btn-success sign" value="submit" name="signup">Sign Up</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

olan CSS

.formError .formErrorContent { 
    width: 100%; 
    background: #222; 
    position:relative; 
    color:#EE330E; 
    min-width: 120px; 
    font-size: 11px; 
    border: 1px solid #EE330E; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    padding: 4px 10px 4px 10px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -o-border-radius: 6px;  
} 

jQuery Validation-Engine olduğunu - link

Answer 1

Sen kutu gölgesi olmayan satıcı öneki eksik.

Aslında, artık bir deneysel özellik olmadığından, kutu gölgesi ve kenarlık yarıçapı için satıcı öneklerini kaldırmanızı öneririm.

Bkz: http://shouldiprefix.com/#box-shadow Ben eksik çizgi ile kodunuzu güncelledikten Ancak

:

#signupForm .formError .formErrorContent { 
    width: 100%; 
    background: #222; 
    position:relative; 
    color:#EE330E; 
    min-width: 120px; 
    font-size: 11px; 
    border: 1px solid #EE330E; 
    outline: 0; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 51, 14, 0.6); 
    padding: 4px 10px 4px 10px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -o-border-radius: 6px;  
} 

Düzenleme -----

Sadece durumda doğrulama hiç çalışmıyor Firefox'ta, doğrulama eklentisinin, modalın işlenmesinden sonra bağlantı elemanına uygulandığından emin olun, örneğin:

$('#signupForm').on('shown.bs.modal', function() { 
    $("#reg-form").validationEngine(); 
} 

Tüm tarayıcılarda yıllarca