internet-explorer-8 убрать - Непрозрачность CSS не работает в IE8




почему наследовать (9)

CSS

Раньше я использовал следующие CSS-Tricks :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Компас

Однако лучшим решением является использование @include opacity(0.1); Opacity Compass , все, что вам нужно сделать, это @include opacity(0.1); и он позаботится о любых проблемах с несколькими браузерами для вас. Здесь вы можете найти пример.

Я использую CSS для указания текста триггера для секции слайда jQuery: т.е. когда вы наводите курсор на текст триггера, курсор меняется на указатель, а непрозрачность текста триггера уменьшается, указывая на то, что текст имеет действие щелчка ,

Это отлично работает в Firefox и Chrome, но в IE8 непрозрачность не меняется.

Я пробовал различные настройки CSS без каких-либо успехов.

Например

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

Что мешает IE изменить непрозрачность? Примечание. Я пробовал это на множестве разных элементов, обмениваясь порядком инструкций CSS и просто используя те же IE. Я также попытался использовать

-ms-filter: "alpha(opacity=75)";

но без успеха.

У меня закончились вещи, чтобы попытаться получить модификацию непрозрачности, работающую в IE8.

Есть идеи?


Этот код работает

filter: alpha(opacity = 50); zoom:1;

Вам нужно добавить свойство масштабирования, чтобы он работал :)


Ни один из вышеперечисленных ответов не работал для меня, поэтому я просто дал свой тег DIV прозрачное фоновое изображение, которое отлично работало для всех браузеров.


Вам нужно сначала установить Opacity для совместимых со стандартами браузеров, а затем в различные версии IE. См. Пример:

но этот код непрозрачности не работает в ie8

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Обратите внимание, что я исключил -moz, поскольку Firefox является браузером, совместимым со стандартами, и эта строка больше не нужна. Кроме того, -khtml обесценивается, поэтому я также устранил этот стиль.

Кроме того, фильтры IE не будут проверяться на стандарты w3c, поэтому, если вы хотите, чтобы ваша страница проверялась, отделите таблицу стилей стандартов от таблицы стилей IE, используя инструкцию if IE, как показано ниже:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

Если вы отделите трюки, ваш сайт будет проверять только штраф.


Использование display: inline-block; работает над IE8 для решения этой проблемы.

FWIW, opacity: 0.75 работает со всеми стандартными браузерами.


Не знаю, относится ли это к 8, но исторически IE не применяет несколько стилей к элементам, у которых нет «макета».

см .: http://www.satzansatz.de/cssd/onhavinglayout.html


Установка этих (точно так же, как я написала) служила мне, когда мне это нужно:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

Вы также можете добавить polyfil, чтобы включить использование прозрачности в IE6-8.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

Это отдельный полифиль, который не требует jQuery или других библиотек. Существует несколько небольших предостережений, которые он не использует для встроенных стилей, и для любых таблиц стилей, которые нуждаются в прозрачности polyfil'd, они должны придерживаться политики безопасности одного и того же происхождения.

Использование мертво просто

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>

Разный подход. С линейным градиентом (для IE, только IE 10+). Вы можете использовать любой угол:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}
<div class="triangle"></div>

Вот jsfiddle





css internet-explorer-8 opacity