CSS krycia nie działa w IE8

143

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?

Marcus Downing
źródło
Myślę, że na to powiązane / zduplikowane pytanie masz odpowiedź. stackoverflow.com/questions/859000/opacity-in-web-pages
Jeff Martin,
Widziałem to pytanie - problem to odpowiedź: <br> <br> & nbsp; & nbsp; filtr: alfa (krycie = 50); / * Internet Explorer / <br> & nbsp; & nbsp; krycie: 0,5; / fx, safari, opera, chrome * / <br> & nbsp; & nbsp; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 50)"; / * IE8 * / <br> <br> nie działa dla mnie (po prostu próbowałem ponownie, aby dokładnie sprawdzić). Zastosowałem to do h3, które było czarne i pogrubione. W przeglądarce Firefox i Chrome ustawienie krycia zmienia kolor nagłówka na szary, jak można się spodziewać, ale w IE8 pozostaje czarny.
ups - nie zdawałem sobie sprawy, że nie możesz używać HTML w komentarzach - ale myślę, że widzisz, co próbuję powiedzieć
jeśli wypróbujesz te style tylko na jednolitym kolorze, czy zadziałają? być może jest jakiś inny CSS, który jest w konflikcie.
Jeff Martin,
Niezłe. Tak - kiedy robię prosty element div, nadaję mu wysokość i szerokość oraz czerwony kolor tła, przy tych ustawieniach krycia działa w IE8. Wychodzi półprzezroczysty. Staram się jednak zobaczyć, w czym jest problem. Nie modyfikuję przezroczystości niczego innego w arkuszu stylów, więc nie mogę pomyśleć, co może z tym kolidować tylko w IE.

Odpowiedzi:

65

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

Azeem.Butt
źródło
9
IE nie stosuje kilku stylów do elementów, które nie mają „układu”.
Azeem.Butt
4
Wspaniały! Dzięki. To był problem. Elementy, dla których próbowałem dostosować krycie (np. H3), nie „mają układu”. Kiedy dałem im trochę, krycie zadziałało. Dodałem tylko szerokość: 100%; do h3. Dzięki za wskazanie mi właściwego kierunku. Jednak wydaje się szalone (jeśli nie błędne), że Internet Explorer to robi.
51
IE nie stosuje wielu stylów do wielu elementów.
danwellman
1
@danwellman, a potem robi też wiele innych „zabawnych” rzeczy. Yay.
dudewad
Ciekawe jest to, że IE7 nie potrzebuje „układu”. Używam responsywnego obrazu tła na elemencie o zerowej wysokości, padding-bottom: 100%aw IE8 krycie nie zadziałało, dopóki nie ustawiłem jawnej wysokości. IE7 tego nie potrzebuje.
Kout
158

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);
Gabriel McAdams
źródło
6
Dzięki, myślę, że "filtr: alfa (krycie = 70);" jest dla IE <8. Jednak nie działa (dla mnie) w IE8 (właśnie sprawdziłem). -moz-krycie jest teraz prawie nieaktualne, jak sądzę, a krycie jest standardowym sposobem robienia rzeczy - więc naturalnie Microsoft nie używał tego sposobu robienia rzeczy (zbyt łatwe).
15
Samo ustawienie „krycia” i „filtra”, jak opisałeś, wystarczyło, aby działało dla mnie zarówno w FF4, jak i IE8. -moz-krycie nie było konieczne.
demoncodemonkey
1
@Gabriel McAdams: filtr: alfa (krycie = 70); działało (ale tylko w IE 8)
Poonam Bhatt
@Gabriel To zadziałało! W IE 7/8 nie będzie już problemów z kryciem!
MJCoder,
1
Bardziej szczegółowe informacje: Właściwie to zanika w metodzie, która usuwa przezroczystość.
tmorell
49

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.

Kevin Florida
źródło
3
Samo ustawienie „krycia” i „filtra”, jak opisałeś, wystarczyło, aby działało dla mnie zarówno w FF4, jak i IE8. Sekcja oznaczona „/ * Następne 2 wiersze IE8 * /” nie była konieczna.
demoncodemonkey
3
@demoncodemonkey: Dobrze. Wszystko zależy od zainstalowanej wersji. Jeśli chcesz maksymalnej kompatybilności, proponuję je wszystkie.
Kevin Florida,
Prawidłowo, ale: „Aby zagwarantować, że użytkownicy zarówno przeglądarki Internet Explorer 7, jak i 8 będą korzystać z filtru, możesz uwzględnić obie składnie wymienione powyżej. Ze względu na specyfikę naszego parsera zaktualizowaną składnię należy najpierw dołączyć przed starszą składnią aby filtr działał poprawnie w widoku zgodności (jest to znany błąd i zostanie naprawiony po ostatecznym wydaniu IE8). Oto przykład arkusza stylów CSS: "(źródło: link )
zrathen
@Kevin "Jeśli chcesz maksymalnej kompatybilności, proponuję je wszystkie". Cóż, nie powinieneś był usuwać -moz-krycia, prawda?
Spooky
Cudzysłowy nie są konieczne dla -ms-filter.
thdoan
17

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

Bonnie V.
źródło
17

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.

crmpicco
źródło
5

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 .

d4nyll
źródło
2

Ż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.

Darren Riches
źródło
1

Ten kod działa

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

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

mejiwara
źródło
1

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>
Chris Marisic
źródło