Question

IE6：当我在div中放置部分透明图像时，该div中与图像的非透明像素重叠的单选按钮变得不可点击。例如：

<!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>
    <div>
      <input type="radio" value="1" name="1"/>
    </div>
  </body>
</html>

如果你测试代码，你也可以尝试将按钮从（60,40）移动到（40,40），在那里图像是透明的，并且瞧 - 点击又重新开始营业。

这个错误可能会或可能不会与IE6 links transparency bug相关，但我知道不足以理解任何相似之处。

我做错了吗？或者我该如何规避呢？除了删除_filter:progid之外还有其他选择吗？

Answer 1

尚未找到问题的真正解决方案，因此请使用以下解决方法之一：

使图像100％透明，单选按钮在哪里（保持良好的边距，它的形状可能不是“圆形”，而是正方形或矩形），
完全删除图片，
以上的组合。：）

Answer 2

您是否尝试将单选按钮的z-index设置为高于透明div的z-index？

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

IE6透明度+单选按钮无法单击

2 个答案: