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(); 
}