Question

给出以下示例表单代码和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）中查看时，按钮正确渲染，但我的文本左侧和右侧都有“空白”空格。超链接正确呈现 enter image description here

当我切换回原生IE8模式时，按钮呈现正确，如同超链接一样长，但滑动门有轻微错位，右侧部分似乎被分流1个像素 enter image description here

如果我然后删除块对齐并调整填充，它会完美呈现（但不再是超链接）

.button_red2  span
{   background:transparent url('../../images/button_red.gif') no-repeat top right; 
    padding:3px 10px 3px 0px;
    border-style:none;
 }

enter image description here

但将其切换回IE6模式会使其更加丑陋

enter image description here

我正在尝试使用按钮，而不是我的表单的超链接，但是从我收到的CSS样式，只有超链接在各种IE版本之间完美呈现。

为什么按钮上的IE6渲染中有额外的空间？回到IE8模式时，为什么它会出现像素格式，如何排序呢？还是不能解决？

滑动门的2个GIF下面。 button_red_left enter image description here

tnxs

克里兹

Answer 1

我认为这是因为IE中的按钮错误导致的太宽。看看这篇文章：http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie

IE6 vs IE8，按钮vs超链接，CSS渲染问题

1 个答案: