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

发布于 2024-09-03 12:19:31 字数 1223 浏览 5 评论 0原文

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 链接透明度错误相关，也可能无关，但我知识不够，无法掌握任何相似之处。

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

原文

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>
    <div>
      <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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫竹語嫣☆ 2024-09-10 12:19:31

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

使单选按钮所在的图像 100% 透明（保持良好的边距，它的形状可能不是“圆形”而是正方形或矩形），
删除完整图像，
以上内容的组合。 :)

回复收藏 0 原文

神回复 2024-09-10 12:19:31

您是否尝试过将单选按钮的 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;
      }

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

回复收藏 0 原文

~没有更多了~