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

IE6: когда я помещаю частично прозрачное изображение в блок 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?


css radio-button transparency internet-explorer-6
person Jonas Byström    schedule 01.06.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

  • сделать изображение прозрачным на 100% там, где находится переключатель (сохраняйте хорошие поля, его форма, вероятно, не «круглая», а квадратная или прямоугольная),
  • удалить изображение полностью,
  • сочетание вышеперечисленного. :)
person Jonas Byström    schedule 03.06.2010

arrow_upward
-1
arrow_downward

Вы пытались установить 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;
      }
person Richard    schedule 01.06.2010
comment
да. Видимо у вас нет. Пожалуйста, проверьте свой код, прежде чем отвечать. - person Jonas Byström; 01.06.2010
comment
Эй, это было предложение. У меня нет с собой копии IE 6, чтобы протестировать вашу проблему. Если вам не нравятся люди, предлагающие ВОЗМОЖНЫЕ ответы, не просите их сделать вашу работу за вас. - person Richard; 01.06.2010
comment
Извините, я слишком остро отреагировал. Мой последний вопрос был заспамлен людьми, которые придумывали всевозможные неуместные «советы», думаю, я все еще немного зол. :) - person Jonas Byström; 01.06.2010
comment
Без проблем. у всех нас есть такие дни. Извините, я не мог помочь. - person Richard; 02.06.2010