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

Question

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

以下是显示问题的图像的链接：https://i.sstatic.net/80UZ6.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

处理跨浏览器兼容的表单时。确保您定义了字段的行高。它可以改变一切，并可能解决你的不一致之处。

Answer 2

如果将行高设置为 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;
}