<button>

Question

として、私はHTMLで定義された背景イメージを持っている2個のタグを持っているログインページを持っている：私は

<div> 
    <button type="submit" name="loginButton" value="App1" class="login-button app1-logo-bkgrd align-left" /> 
    <button type="submit" name="loginButton" value="App2" class="login-button app2-logo-bkgrd align-right" /> 
</div> 

！私は（値= "App2の" との）第二ボタンは魔法のようになりますいくつかの理由について< DOCTYPE html>この

を使用しています

.align-left { 
    float: left; 
} 

.align-right { 
    float: right; 
} 

.app1-logo-bkgrd { 
    background: transparent url('images/app1logo.png') top left no-repeat; 
    width:220px; 
    height:180px; 
} 

.app2-logo-bkgrd { 
    background: transparent url('images/app2logo.png') top left no-repeat; 
    width:220px; 
    height:180px; 
} 

.login-button 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    cursor: pointer; 
} 

：として定義されるCSSクラス同じHTML/CSSがFF5でうまく動作するのに対し、IE9標準モードでは繰り返されます。

互換モードボタンを押すと正しく表示されます（IEはIE7のドキュメントタイプに切り替わりました。つまり、開発ツールです）。

問題が発生したときにIE 9のソースを表示すると、2番目のボタンのインスタンスが1つだけ表示されます。しかし、devのツールを使用してセレクタ機能を使用すると、フォームの直後に別のApp2ボタンがあります。

最初の（value = "App1"）ボタンを削除して残りのボタンを同じalign-leftクラスを使用するように変更しようとしましたが、それでも今のところ理由で繰り返されています。

問題の原因は何ですか？

Answer 1

これは実際にIE9のバグが原因です。

背景画像でスタイルされた自己閉じボタンのタグを使用すると、ページ内で繰り返し表示されますが、画像の1つだけがクリック可能になります。含まれているかどうかわからない<div>私はこれを試していない。

私が2つのボタンを持っていた私のケースでは、2番目のボタンが1番目のボタンのバグを効果的に修正しました。これは、ボタンの順番を入れ替えた場合、

回避策は、このように背景イメージを使用するときに、開いているタグと閉じたタグの間に何もないのに、<button></button>構文を使用することです。