代码之家 › 专栏 › 技术社区 › Jonas Byström

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

radio-button transparency internet-explorer-6 css

Jonas Byström · 技术社区 · 15 年前

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),然后voil_-单击再次投入业务。

此错误可能与 IE6 links transparency bug 但我还不太了解,我也不太了解任何相似之处。

我做错什么了吗?或者我怎样才能规避?除了移除 _filter:progid ?

2 回复 | 直到 15 年前

Jonas Byström 15 年前

没有找到任何解决问题的真正方法,请使用以下解决方法之一:

使图像在单选按钮所在位置100%透明(保持良好的边缘,其形状可能不是“圆形”,而是方形或矩形)。
完全删除图像,
上面的组合。:)

-1

Richard 15 年前

您是否尝试将单选按钮的Z索引设置为高于透明DIV的Z索引?

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

推荐文章

lily · 淘汰-如何将动态填充的复选框转换为单选按钮(是/否)?

7 年前