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

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

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黑客：

.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;
}

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

3 个答案: