开发者

IE6 vs IE8, button vs hyperlink, CSS rendering issue

Given the following sample form code and CSS stylesheet

Form

<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 } 

When viewing this in IE8's compatibility mode (IE6), the button is rendering correctly but i get 'blank' spaces to the left and right of my text. the hyperlink renders correctl开发者_运维技巧y

IE6 vs IE8, button vs hyperlink, CSS rendering issue

When i switch back to native IE8 mode, the button renders correctly, as lenghty as the a hyperlink but there's a slight misalignment in the sliding door, the right part seems to be shunted 1 pixel down

IE6 vs IE8, button vs hyperlink, CSS rendering issue

If i then remove the block alignment and adjust the padding , it renders perfectly (but no longer the hyperlink)

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

IE6 vs IE8, button vs hyperlink, CSS rendering issue

But switching that back to IE6 mode makes it even more uglier

IE6 vs IE8, button vs hyperlink, CSS rendering issue

I'm trying to use a button, not a hyperlink for my forms but from the CSS style I got delivered, only the hyperlink renders perfectly between various IE versions.

Why is there that extra space in the IE6 rendering on the button? Why does it appear a pixel out of line when back to IE8 mode and how can that be sorted? Or is it not solvable?

Below the 2 gifs for the sliding doors.

IE6 vs IE8, button vs hyperlink, CSS rendering issue

IE6 vs IE8, button vs hyperlink, CSS rendering issue


I think it is caused by the button bug in IE which is rendered too wide. Have a look at this article: http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜