• Две различные манеры любить

  • ТЕАТР ТЕНЕЙ: ИЗ ПИРАТСКОГО РОМАНА. СЦЕНА СЕДЬМАЯ.

  • По работе приходится частенько сталкиваться с комплексными случаями в разметке HTML, требующих сочетания использования полупрозрачных PNG (тени, закругления) и общей прозрачности элемента (через opacity и фильтры), особенно для классических Javascript-анимаций типа Fade.
    Естественно, в 90% случаев именно капризная система фильтров Internet Explorer становится источником головной боли, забирая иногда по нескольку часов на решение простейших задач.

    Вот один из любопытных и нехарактерных случаев:

    Есть основной блок "parent". Его ширина и высота фиксированы, он имеет Opacity=50 и окрашен в красный цвет.
    Внутри него абсолютно позиционирован блок "child". Он меньшего размера, чем "parent", имеет зеленый цвет и его opacity=30.
    Также внутри parent лежит некоторый блок "text", который частично попадает на "child" блок. Этот блок не имеет opacity.

    HTML:

    
    <div class='parent'>
        <div class='child'></div>
        <div class='text'>text text text text text text text text text text</div>
    </div>
    

    CSS:

    
    .parent
    {
        opacity: 0.5;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        position: relative;
    }
    .child
    {
        opacity: 0.3;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        background-color: #00ff00;
    }
    .text
    {
        position: relative;
    }
    

    Вот так это выглядит в нормальных браузерах:

    Вот так это выглядит в IE6, IE7 и IE8 (в режиме совместимости):

    Что происходит?

    Если приглядеться внимательно, то видно, что не просто текст сменил свой цвет, а на пересечении блоков с выставленным Alpha фильтром появились "прорези" по форме текста :) То есть сам текст отрисован не был, хотя его местоположение было учтено фильтром при подготовке слоя.
    То же самое случится, если вместо Opacity мы выставим полупрозрачные PNG через AlphaImageLoader.
    Вылечить это можно только усложнением структуры html, чтобы блоки с назначенными на них фильтрами не были вложенными друг в друга. Кроме того, если не использовать в данном примере режим совместимости IE8, то мы столкнемся с другой, более серьезной проблемой, которую я опишу в следующий раз.

    Пример:
    http://www.art-web.ee/blog/testcase1/index.html












  • Две различные манеры любить

  • ТЕАТР ТЕНЕЙ: ИЗ ПИРАТСКОГО РОМАНА. СЦЕНА СЕДЬМАЯ.