框陰影和其他顏色效果不工作在Mozilla Firefox

Question

我創建了一個彈出式註冊表單與引導模態類。我使用了一些jQuery驗證引擎來驗證表單。在那裏我添加了一個盒子陰影，並改變了背景顏色和顏色。這在Chrome和Internet Explorer上運行良好，但它不適用於Firefox。

這裏是我的形式

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

這裏是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的驗證 - 引擎 - link

Answer 1

你失蹤了盒陰影非供應商前綴。

我實際上建議刪除供應商的前綴既盒陰影和邊框半徑，因爲他們不再是一個實驗性的功能。

參見：http://shouldiprefix.com/#box-shadow

不過，我已經與缺失行更新您的代碼：

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

編輯-----

公正的情況下驗證不工作在Firefox中...確保驗證插件在模式被觸發後將綁定應用於元素，例如：

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

多年來，所有瀏覽器都支持前景支持