IE фильтр градиента не реагирует на событие клика

Question

Я хочу иметь прозрачный фоновый цвет, и я использую градиентный фильтр как запасной вариант RGBA в IE. Код такой:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff);

Я также хочу вызвать событие, когда пользователь щелкает фон, но кажется, что событие щелчка не срабатывает после того, как я установил фильтр. Все нормально без фильтра.

Так это еще одна ошибка IE? Как я могу решить проблему?

Answer 1

Это, вероятно, связано с ошибкой IE, из-за которой ссылки с прозрачным фоном перестали щелкать мышью: я сталкивался с этим сегодня. У меня была ссылка с прозрачным фоном и дисплеем, настроенным на блокировку: основная область ссылки не была кликабельной, но была установлена ​​граница размером 10 пикселей. Похоже, у IE тоже есть проблемы с фильтрами.

Этот тип ошибки обсуждается здесь и здесь . Решение первого парня состоит в том, чтобы придать элементу поддельное фоновое изображение перед установкой фильтра. Второй способ - придать элементу цвет фона и установить непрозрачность равной 1%, что сделает его практически невидимым в IE. Надеюсь, вы сможете обойти это, используя один из них.

Answer 2

Это не сделка.Internet Explorer создает фильтры на отдельном слое, который расположен над вашим элементом, и поскольку новый графический слой не является частью элемента, на котором у вас есть событие click, события не будут пузыриться.

В последнее времяЯ сделал элемент метки с красивым градиентным фильтром для IE.Только текст можно нажать.Если я проанализирую слои надписей со стороны с градиентным слоем и без него, вы поймете проблему.

without gradient filter:

------------------
 text layer
------------------
 background layer
------------------


with gradient filter:

------------------
 text layer
------------------
 gradient layer
------------------
 background layer
------------------

Кстати, именно поэтому вы не можете поместить радиус границы наградиентный фильтр тоже.Попытайся.Создайте элемент, нарисуйте его с радиусом границы, дайте ему фильтр градиента и запустите его в IE 9. Независимо от того, как вы пытаетесь заставить градиент оставаться внутри круглых границ - например, с помощью overflow: hidden - он никогда не будетподчиниться.Это как отдельный элемент, который расположен абсолютно и прямо над вашим элементом, чтобы скрыть его и прямо под текстом.