css - 在 IE8 中没有响应的表单的边距和填充

Question

我们即将结束大规模的网站重新设计，所以我正在测试和检查跨浏览器等等。我为我的带有图像悬停的漂亮表单感到非常自豪，并在 IE8 中检查它，结果发现文本的填充和边距都乱七八糟。

这是显示问题的图像的链接:http://i.imgur.com/F6zPP.jpg

这不是什么大不了的事，只是从设计师的 Angular 来看非常烦人，而且用户可能也是如此。

这里有一个 jsfiddle 来查看表单的样子:http://jsfiddle.net/kennyk3/qL96P/

这是表单的 HTML/CSS:

<div id='account'>
            <form id='login' action='signin.php' method='post' accept-charset='UTF-8'>
            <fieldset class='topform'>
            <input type='hidden' name='submitted' id='submitted' value='1'/>
            <div id='front_login_text'>
            <label for='email'>Email:</label>                               
            <input type='text' name='email' id='email' class='textInput' maxlength='50' />
            <label for='password'>Password:</label>
            <input type='password' name='password' id='password' class='textInput' maxlength='50' />
            </div>
            <input type='submit' name='Submit' value='' class='loginsubmit' />
            <p class='remtext'><input type='checkbox' class='rememberme' name='remember' value='remember' />Remember me on this computer</p>
            <p class='notamember'><strong>Not a Member?</strong> <a href='/register.php'>Sign Up Today!</a></p>
            </fieldset>
            </form>
            <p class='forgotpw'>Forgot Your Password? <a href=''><strong>Click Here to Reset it.</strong></a></p>
            </div>
            <div class='break'></div>
            <div id='button'>
            <a href='' class='toursprite' title='Take the Tour'>Take the Tour</a>
            </div>



.topform    {
    padding: 60px 0 0 20px ;
    border: none;
}
.textInput
{
    width: 190px;
    height: 39px;
    background: url(../images/textfield-bg.png) no-repeat;
    border: none;
    color: #929292;
    padding: 0 20px 0 10px;
    margin: 5px 0 0 0;
    overflow: hidden;
}

.textInput:hover {
    background: url(../images/textfield-hover.png) no-repeat;

}
#account label {
    float: left;
    text-align: right;
    width: 60px;
    font-size: 14px;
    margin: 12px 10px 0 0;
    color: #929292;
}

#account fieldset {
    width: 300px;
}

#front_login_text input:focus, #front_login_text textarea:focus {
    outline: 0;
    background: url(../images/textfield-hover.png) no-repeat;
}

#side_login_text input:focus, #side_login_text textarea:focus {
    outline: 0;
    background: url(../images/textfield-hover-small.png) no-repeat;
}

#side_optin_text input:focus, #side_optin_text textarea:focus {
    outline: 0;
    background: url(../images/textfield-hover-small.png) no-repeat;
}

.loginsubmit {
    float: right;
    margin: 10px 5px 0 0;
    width: 70px;
    height: 35px;
    background: url(../images/login-btn.png) center no-repeat;
    border: 0 none;
    cursor: pointer;
}

.loginsubmit:hover {
    float: right;
    margin: 10px 5px 0 0;
    width: 70px;
    height: 35px;
    background: url(../images/login-btn-hover.png) center no-repeat;
    border: 0 none;
    cursor: pointer;
}

.loginsubmit:active {
    float: right;
    margin: 10px 5px 0 0;
    width: 70px;
    height: 35px;
    background: url(../images/login-btn-active.png) center no-repeat;
    border: 0 none;
    cursor: pointer;
}

Answer 1

处理跨浏览器兼容的表单时。确保为字段定义行高。它可以发挥重要作用，并可能解决您的不一致问题。