IE6 прозрачность + радио кнопка не может быть нажата - PullRequest
Новая
       26

IE6 прозрачность + радио кнопка не может быть нажата

0 голосов
/ 01 июня 2010

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?

Ответы [ 2 ]

0 голосов
/ 03 июня 2010

Не найдено никакого реального решения проблемы, поэтому используйте один из следующих обходных путей:

  • сделать изображение на 100% прозрачным там, где установлен переключатель (оставьте хорошее поле, его форма, вероятно, не "круглая", а квадратная или прямоугольная),
  • полностью удалить изображение,
  • комбинация вышеперечисленного. :)
0 голосов
/ 01 июня 2010

Вы пытались установить z-индекс переключателя выше, чем у прозрачного 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;
      }
...