CSS фильтр Internet Explorer - PullRequest
Новая
       22

CSS фильтр Internet Explorer

0 голосов
/ 05 ноября 2018

Есть ли способ заставить этот класс CSS работать в Internet Explorer 11? 

.inactive {
    filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28);    
}

Я пытался использовать SVG-фильтр в градациях серого, но он не работает, что также нарушает работу браузера общего пользования. «Избегайте использования IE11», даже будучи лучшим из советов, в данном случае не является подходящим решением

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Более старые версии Internet Explorer (от 4.0 до 8.0) поддерживали нестандартное свойство «filter», которое устарело , IE 11 не поддерживает это свойство.

Вы можете попробовать использовать оверлей SVG в IE 11 для выполнения градации серого. Например: 

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img.grayscale:hover {
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        }

        svg {
            background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
        }

            svg image:hover {
                opacity: 0;
            }

    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
        <defs>
            <filter id="filtersPicture">
                <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
                <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
            </filter>
        </defs>
        <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>
</body>

(от: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

Упрощенная JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/

Подробнее о фильтре SVG вы можете обратиться к этому блогу .

Если SVG-фильтр все еще не работает для вас, я предлагаю вам попробовать установить свойство CSS Opacity .

0 голосов
/ 05 ноября 2018

создайте медиазапрос, используя -ms-high-контраст, в который вы помещаете свои стили CSS, специфичные для IE 10 и 11. Поскольку -ms-high-контраст специфичен для Microsoft (и доступен только в IE 10+), он будет анализироваться только в Internet Explorer 10 и более поздних версиях.

-ms-high-контраст поддерживает два значения: нет и активно. Поэтому для таргетинга IE10 + независимо от настройки свойства используйте этот медиазапрос: 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
...