【发布时间】：2011-09-07 16:02:22
【问题描述】：
给定以下示例表单代码和 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 下方。
【问题讨论】：
-
"IE8's compatibility mode (IE6)"- 这是不对的。 IE8 的兼容模式模拟 IE7 not IE6。您能否澄清一下您要修复的确实是 IE7，而不是 IE6？ -
我有一个开启普通旧 IE6 的虚拟机，屏幕输出相同（= 使用按钮时的空格）。我们从未在我们的企业中推出过 IE7。
-
这里的输出在 IE6 和 IE7 中可能是一样的，但是你可以看到当你说“IE8 兼容性 == IE6”时我是多么的困惑。我会看看为所有 IE8/7/6 修复它。
标签： asp.net css internet-explorer-8 internet-explorer-6 sliding-doors