Jquery插入图像会使我的表单崩溃

我正在使用jQuery验证，我有这样的问题：当输入有效与否时，我插入图像。当他们插入一个图像时，一个图像完全显示，但留出边距并崩溃我的div，第二个 - 具有相同的css属性 - 部分显示并且不会崩溃任何东西。

我正在使用 Rails，我的表单在 Bootstrap modal 上。

这是屏幕截图 - https://i.stack.imgur.com/JbirM.png

这是 css ：

label.error {
color:transparent;
display: inline;  
background: url('not_valid.png') no-repeat;
padding: 10px;
margin-left: 5px;
width: 47px;
height: 36px;
}
label.valid {
background: url('valid.png') no-repeat;
display: inline;  
padding: 10px;
margin-left: 5px;
color:transparent;
width: 47px;
height: 36px;
}
input{
    font-size: 14px;
    border: 1px solid rgba(98,141, 40, 0.5);
    border-radius:10px;
    -moz-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
    -webkit-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
    box-shadow: inset 0 0 2px 1px rgba(98,141, 40, .2);
}
input.valid{
    border: 1px solid rgb(98,141, 40);
    font-size: 14px;
    -moz-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
    -webkit-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
    box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);    
    border-radius:5px;
}

.HTML

<html>
  <head>
    <title>JCheck</title>
    <link href="application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="jcheck.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/jquery-1.7.2.js?body=1" type="text/javascript"></script>
<script src="jquery.validate.min.js?body=1" type="text/javascript"></script>
<script src="jquery.js?body=1" type="text/javascript"></script>
<script src="jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="jquery-1.7.2.js?body=1" type="text/javascript"></script>
<script src="jquery.validate.min.js?body=1" type="text/javascript"></script>
<script src="application.js?body=1" type="text/javascript"></script>
    <meta content="authenticity_token" name="csrf-param" />
<meta content="EoQ2xPXGeDJpKsf22dPZcFQDUfj8cAfV8owQ493TkGU=" name="csrf-token" />
  </head>
  <body>
    <script type="text/javascript"> jQuery(function() { var validator = jQuery('#new_user').jcheck({'field_prefix': 'user'}); validator.validates('email', {'presence': {'if': 'email_required?'}, 'format': {'with': /A[^@]+@([^@.]+.)+[^@.]+z/, 'allow_blank': true, 'if': 'email_changed?'}, 'presence': true}); validator.validates('password', {'presence': {'if': 'password_required?'}, 'confirmation': {'if': 'password_required?'}, 'length': {'allow_blank': true, 'minimum': 6, 'maximum': 128}}); validator.validates('name', {'presence': true}); validator.field('email').custom_label = 'Email'; validator.field('password').custom_label = 'Password'; validator.field('name').custom_label = 'Name'; }); </script>
<h2>Sign up</h2>
<form accept-charset="UTF-8" action="/users" class="sign_up" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="EoQ2xPXGeDJpKsf22dPZcFQDUfj8cAfV8owQ493TkGU=" /></div>

<div><label for="user_name">Name</label><br />
    <input id="user_name" name="user[name]" size="30" type="text" /></div>
  <div><label for="user_email">Email</label><br />
    <input id="user_email" name="user[email]" size="30" type="text" value="" /></div>
  <div><label for="user_password">Password</label><br />
    <input id="user_password" name="user[password]" size="30" type="password" /></div>
  <div><label for="user_password_confirmation">Password confirmation</label><br />
    <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /></div>
  <div><input name="commit" type="submit" value="Sign up" /></div>
</form>
  <a href="/users/sign_in">Sign in</a><br />
  <a href="/users/password/new">Forgot your password?</a><br />
  </body>
</html>

我的所有文件： https://www.dropbox.com/sh/1ea9k2z6vmsvg58/Pz5X0qRNDv（"成功"后去除昏迷）

当我给标签更多填充时，它会显示出来。我不明白为什么他们的行为不一样？问题出在哪里？

我忘记了默认错误消息。所以我只是删除它们（因为它们是透明的，这是我的项目需要的） - 只显示没有文本的图像。

相关内容

最新更新

热门标签：