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?
css
internet-explorer-8
opacity
Marcus Downing
źródło
źródło
Odpowiedzi:
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
źródło
padding-bottom: 100%
aw IE8 krycie nie zadziałało, dopóki nie ustawiłem jawnej wysokości. IE7 tego nie potrzebuje.Ustawienie tych (dokładnie tak, jak napisałem) posłużyło mi wtedy, gdy tego potrzebowałem:
źródło
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
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:
Jeśli oddzielisz np. Dziwactwa, Twoja witryna będzie działać poprawnie.
źródło
Najwyraźniej przezroczystość alfa działa tylko na elementach blokowych w IE 8. Ustaw wyświetlanie: blok.
źródło
Użycie
display: inline-block;
działa w IE8 do rozwiązania tego problemu.FWIW,
opacity: 0.75
działa na wszystkich przeglądarkach zgodnych ze standardami.źródło
CSS
Kiedyś używałem następujących z CSS-Tricks :
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 .źródło
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
źródło
Ż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.
źródło
Ten kod działa
Aby to działało, musisz dodać właściwość zoomu :)
źródło
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
źródło