フォームの余白と埋め込みが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

クロスブラウザの互換性のあるフォームを扱います。フィールドの行の高さを定義してください。それはすべての違いを作ることができ、あなたの矛盾を修正するかもしれません。

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