次のサンプルフォームコードとCSSスタイルシートが与えられます
形
<div class="Center_300 ">
<button id="KeaneDelegate" runat="server" class="button_red2" causesvalidation="false"><span>Keane's delegate view</span></button>
<br />
<br />
<a class="button_red2"> <span>Keane's delegate view</span></a>
</div>
css
.button_red2
{
background:url('../../images/button_red_left.gif') no-repeat left top;
display:inline;
float:left;
font-size:12px;
font-weight:bold;
line-height:16px;
height:21px;
padding-left:9px;
text-decoration:none;
border-style:none;
color:White;
}
.button_red2 span
{ background:transparent url('../../images/button_red.gif') no-repeat top right;
padding:3px 10px 2px 0px;
border-style:none;
display:block;
}
.Center_300 { width:300px; margin:0 auto }
IE8の互換モード（IE6）でこれを表示すると、ボタンは正しくレンダリングされますが、テキストの左右に「空白」のスペースが表示されます。ハイパーリンクは正しくレンダリングされます
ネイティブIE8モードに戻すと、ボタンはハイパーリンクと同じくらい長く正しくレンダリングされますが、引き戸にわずかなずれがあり、右側の部分が1ピクセル下にシャントされているように見えます
次に、ブロックの配置を削除してパディングを調整すると、完全にレンダリングされます（ただし、ハイパーリンクは表示されなくなります）
.button_red2 span
{ background:transparent url('../../images/button_red.gif') no-repeat top right;
padding:3px 10px 3px 0px;
border-style:none;
}
しかし、それをIE6モードに戻すと、さらに醜くなります
フォームのハイパーリンクではなく、ボタンを使用しようとしていますが、配信されたCSSスタイルから、さまざまなIEバージョン間でハイパーリンクのみが完全にレンダリングされます。
ボタンのIE6レンダリングに余分なスペースがあるのはなぜですか？IE8モードに戻ったときに、ピクセルがずれて表示されるのはなぜですか。また、どのように並べ替えることができますか？それとも解決できないのですか？
引き戸の2つのgifの下。
