框阴影和其他颜色效果在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-Validation-Engine- 链接

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