Проблема Internet Explorer с псевдоэлементом css: after при использовании фильтра прозрачности - PullRequest
Новая
       4

Проблема Internet Explorer с псевдоэлементом css: after при использовании фильтра прозрачности

1 голос
/ 15 декабря 2010

Я рисую заостренный треугольник в нижней части div, используя: after псевдоэлемент.Работает как задумано.Однако, когда я добавляю фильтр непрозрачности для div, он перестает работать в IE (я тестирую его на IE8).Он отлично работает в FF, Chrome и Safari.

Вот HTML: 

<html>
    <head></head>
    <body>
        <div id="demo"></div>
    </body>
</html>

Вот CSS: 

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;
}
#demo:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #333;
  top: 100%;
  left: 10px;
}

Запустите его в IE и посмотритерезультат, который выглядит как изображение здесь: текст ссылки

Теперь добавьте фильтр непрозрачности IE: в #demo, чтобы он выглядел следующим образом, и снова запустите его в IE: 

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;

  filter: alpha(opacity=50);
}

Обратите внимание, что фильтр непрозрачности работает, но треугольник внизу div исчез.То же самое прекрасно работает в любом другом браузере (единственное отличие в том, что вам нужно использовать «opacity: 0.5» вместо специфичного для IE «filter: alpha (opacity = 50);»)

Кто-нибудь знаетпочему это происходит, и как обойти это?

Спасибо.

Ответы [ 2 ]

3 голосов
/ 15 декабря 2010

Объект должен иметь макет , чтобы фильтр отображался.Псевдоэлемент: после не имеет макета.Извините, что сказал.

0 голосов
/ 17 ноября 2011

Проблема в том, что визуальные фильтры IE (как и используемый вами альфа-фильтр) были разработаны до, после и до, были реализованы в IE.

Вы должны обернуть #demo div другим контейнером div и наложить на него непрозрачность (убедившись, что div контейнера имеет макет).

Увы, это единственный способ сделать это.

...