Używam CSS, aby wskazać tekst wyzwalacza dla sekcji wysuwanej jQuery: tj. Gdy najedziesz kursorem na tekst wyzwalacza, kursor zmieni się we wskaźnik, a krycie tekstu wyzwalacza zostanie zmniejszone, aby wskazać, że tekst ma akcję kliknięcia .

Działa to dobrze w Firefoksie i Chrome, ale w IE8 krycie się nie zmienia.

Próbowałem różnych ustawień CSS bez żadnego sukcesu.

Na przykład

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;
}

Co powstrzymuje IE przed zmianą krycia? Uwaga: próbowałem tego na wielu różnych elementach, zamieniając kolejność instrukcji CSS i po prostu używając osobnych instrukcji IE. Próbowałem też użyć

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

ale bez powodzenia.

Skończyły mi się rzeczy, aby spróbować uzyskać modyfikację krycia działającą w IE8.

Jakieś pomysły?

Nie mam pojęcia, czy to nadal dotyczy 8, ale historycznie IE nie stosuje kilku stylów do elementów, które nie mają „układu”.

zobacz: http://www.satzansatz.de/cssd/onhavinglayout.html

Ustawienie tych (dokładnie tak, jak napisałem) posłużyło mi wtedy, gdy tego potrzebowałem:

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

Najpierw musisz ustawić Krycie dla przeglądarek zgodnych ze standardami, a następnie dla różnych wersji IE. Zobacz przykład:

ale ten kod krycia nie działa w 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);
}

Zauważ, że wyeliminowałem -moz, ponieważ Firefox jest przeglądarką zgodną ze standardami i ta linia nie jest już potrzebna. Ponadto -khtml jest amortyzowane, więc wyeliminowałem również ten styl.

Co więcej, filtry IE nie będą sprawdzać zgodności ze standardami w3c, więc jeśli chcesz, aby Twoja strona była weryfikowana, oddziel arkusz stylów standardów od arkusza stylów IE, używając instrukcji if IE, jak poniżej:

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

Jeśli oddzielisz np. Dziwactwa, Twoja witryna będzie działać poprawnie.

Najwyraźniej przezroczystość alfa działa tylko na elementach blokowych w IE 8. Ustaw wyświetlanie: blok.

Użycie display: inline-block;działa w IE8 do rozwiązania tego problemu.

FWIW, opacity: 0.75działa na wszystkich przeglądarkach zgodnych ze standardami.

CSS

Kiedyś używałem następujących z 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;
}

Kompas

Jednak lepszym rozwiązaniem jest użycie mieszanki Opacity Compass , wszystko, co musisz zrobić, to załatwić @include opacity(0.1);za Ciebie wszelkie problemy z różnymi przeglądarkami. Można znaleźć przykład tutaj .

oto odpowiedź dla IE 8

I DZIAŁA, aby alpha działała w IE8, musisz użyć atrybutu pozycji dla tego elementu, takiego jak

pozycja: względna lub inna.

http://www.codingforums.com/showthread.php?p=923730

Żadna z powyższych odpowiedzi nie zadziałała dla mnie, więc zamiast tego nadałem mojemu tagowi DIV przezroczysty obraz tła, który działał idealnie dla wszystkich przeglądarek.

Ten kod działa

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

Aby to działało, musisz dodać właściwość zoomu :)

Możesz także dodać plik polyfil, aby włączyć natywne użycie krycia w IE6-8.

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

Jest to samodzielny plik polyfil, który nie wymaga jQuery ani innych bibliotek. Jest kilka drobnych zastrzeżeń, że nie działa na stylach liniowych, a dla wszystkich arkuszy stylów, które wymagają polifilii krycia, muszą one przestrzegać zasad bezpieczeństwa tego samego pochodzenia.

Użycie jest banalnie proste

<!--[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>