给定以下示例表单代码和 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 下方。