I have the following css code. button.png is image where 3 button states are pasted vetrically, so i just move image in css.
a.button
{
background-image: url(button.png);
background-position: 0px 0px;
width: 100px;
height: 30px;
display: block;
background-repeat: no-repeat;
text-indent: -9999px;
}
a:hover.button
{
background-position: -100px 0px;
}
a.button[disabled]
{
background-position: -200px 0px;
cursor:default;
}
I put this in开发者_StackOverflow社区 html
<a href="#" class="button" disabled="disabled"></a>
In Chrome all is ok. IE dont show disabled image.
IE 6 can't handle attribute selectors. Source
IE 7 and 8 should be able to handle a.button[disabled=disabled]
though.
For full compatibility, you would have to add a class to the disabled button:
a.button[disabled],
a.disabled
{
...
}
<a href="#" class="button disabled" disabled="disabled"></a>
What IE - attribute selectors are not supported in IE6 and you need a doctype in the others.
If you can assume your users will have javascript on you can use ie7.js to provide the missing selectors http://dean.edwards.name/IE7/
精彩评论