IE9, IE10 двойное погружение CSS непрозрачность / фильтр - PullRequest
Новая
       21

IE9, IE10 двойное погружение CSS непрозрачность / фильтр

3 голосов
/ 08 августа 2011

У меня есть следующие стили CSS для полупрозрачного фона для элемента блока: 

/* FF, Chrome, Opera, IE9, IE10 */
background: rgb(255,255,255) transparent; 
background: rgba(255,255,255, 0.7); 
/* IE7, IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);

По большей части это работает.Тем не менее, IE9 и IE10 имеют двойной провал (как фильтр, так и стиль фона), поэтому мы накладываем оверлей дважды, и это выглядит довольно непрозрачно.

Как я могу предотвратить это?

Ура!.

Ответы [ 4 ]

1 голос
/ 15 ноября 2011

Как насчет этого решения ? 

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
1 голос
/ 08 августа 2011

Вы можете поместить фильтр в отдельную таблицу стилей и использовать для нее условные операторы 

<!--[if lt IE 9]>
    <link href="lowie-versions.css" rel="Stylesheet" />
<![endif]-->

Лично я нахожу их довольно хакерскими, но иногда они просто нужны

0 голосов
/ 09 октября 2013 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

"Это взято из в совокупности ", тогда вы можете вместо этого использовать классы в своем HTML-теге, чтобы стиль IE8, специфичный для вашего класса, был бы следующим: 

.yourclass {
  /* FF, Chrome, Opera, IE9, IE10 */
  background: rgb(255,255,255) transparent; 
  background: rgba(255,255,255, 0.7); 
}
.lt-ie9 .yourclass {
  /* IE7, IE8 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
}

Лучший рабочий процесс в моем вкусе

0 голосов
/ 25 августа 2011

Попробуйте это в конце всех ваших таблиц стилей: 

*:not(#old_ie) {
     filter:progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
}

Это работает для меня. Таким образом, вам не нужна отдельная таблица стилей.

Теперь, если кто-то может просто найти хороший способ «поместить на карантин» CSS специально для IE9 (без условных комментариев HTML)…

...