IE8 中无响应表单的边距和填充

Question

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

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

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

这是一个 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

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

Answer 2

如果您将 line-height 设置为 200% 或 250%，对于 Chrome，它仍应显示在中心，而在 IE 中应该更靠近中心。我刚刚在你的表格上试过了。

它不像浏览器特定的 CSS 修复那样干净，但它可能满足您的需求。

.textInput
{
    width: 190px;
    height: 39px;
    background: url(http://i.imgur.com/sEdWU.png) no-repeat;
    border: none;
    color: #929292;
    padding: 0px 20px 0 10px;
    margin: 5px 0 0 0;
    overflow: hidden;
line-height:220%;   
}

Answer 3

IE8 读取页边距很有趣，有时会折叠它们。与其重做任何事情，不如做这个 CSS hack：

.textInput
{
    width: 190px;
    height: 39px;
    background: url(http://i.imgur.com/sEdWU.png) no-repeat;
    border: none;
    color: #929292;
    padding: 0 20px 0 10px;
    margin: 5px 0 0 0;
    padding: 10px 20px 0 10px\9;
    overflow: hidden;
}