с учетом следующего примера кода формы и таблицы стилей 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 картинок для раздвижных дверей.
tnxs
Криз