IE6 transparency+radio button can't be clicked
IE6: when I place a partially transparent image in a div, the radio buttons in that div that overlap the non-transparent pixels of the image become unclickable. Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
div
{
position: relative;
width: 500px;
height: 300px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
}
</style>
</head>
<body>
<di开发者_StackOverflowv>
<input type="radio" value="1" name="1"/>
</div>
</body>
</html>
If you test the code, you can also try moving the button from (60, 40) to (40, 40) where the image is transparent, and voilà - the clicking is back in business again.
This bug might, or might not, be related to the IE6 links transparency bug, but I'm not knowledgable enough to grasp any resemblence.
Have I done something wrong? Or how can I circumvent? Is there some other option apart from removing the _filter:progid?
Haven't found any real solution to the problem, so use one of the following workarounds:
- make image 100 % transparent where the radio button is (keep good margin, it's shape is probably not "round" but square or rectangular),
- remove the image entirely,
- combination of the above. :)
Have you tried setting the z-index of the radio button to higher than that of the transparent div?
div
{
position: relative;
width: 500px;
height: 300px;
z-index: 1;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
z-index: 999;
}
加载中,请稍侯......
精彩评论