4

给定以下示例表单代码和 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 下方。 button_red_left 在此处输入图像描述

4

1 回答 1

1

我认为这是由 IE 中的按钮错误引起的,它呈现得太宽。看看这篇文章: http: //latrine.dgx.cz/the-stretched-buttons-problem-in-ie

于 2011-06-07T08:53:40.783 回答