Wiem, że program Internet Explorer ma kilka zastrzeżonych rozszerzeń, dzięki czemu można tworzyć takie elementy, jak tworzenie elementów div z gradientowym tłem. Nie pamiętam nazwy elementu ani jego użycia. Czy ktoś ma jakieś przykłady lub linki?Kolory gradientowe w przeglądarce Internet Explorer
Odpowiedz
Spójrz na niestandardowych filtrów CSS IE może obsłużyć http://msdn.microsoft.com/en-us/library/ms532847.aspx
Od ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
Styl filter
powinien pracować dla IE8 i IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
To nie działa – Webnet
Kod używam dla wszystkich gradientów przeglądarek:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
Trzeba będzie określić wysokość lub zoom: 1
zastosować hasLayout
z elementem do tego, aby pracować w IE.
Aktualizacja:
Oto mniej Mixin (CSS) w wersji dla wszystkich użytkowników, że mniej tam:
.gradient(@start, @end) {
background: mix(@start, @end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -webkit-linear-gradient(@start, @end);
background: -moz-linear-gradient(top, @start, @end);
background: -ms-linear-gradient(@start, @end);
background: -o-linear-gradient(@start, @end);
background: linear-gradient(@start, @end);
zoom: 1;
}
Doskonały fragment dla gradientów. zoom: 1 jest kluczem do odpowiedzi na to pytanie. – Voltin
@ Blowsie Mam problemy z gradientami, gdy są używane w połączeniu z promieniem obramowania. W tym tle skutecznie oddziela rogi. Oczywiście zależnie od wybranego zakresu kolorów tło wypełnia rogi. Czy istnieje sztuczka do obsługi promienia obramowania i gradientu tła w IE? – codepuppy
@codepuppy Jest to znany błąd bez rozwiązania, duże frameworki, takie jak bootstrap, wybrały opcję border-radius bez gradientu. – Blowsie
Pomyślałem, że dodam ten przydatny link: http://css3please.com/
Pokazuje, jak uzyskać gradienty działające we wszystkich przeglądarkach.
Spróbuj tego:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
IE5? Och, proszę, nie ma potrzeby, aby – Ryan
Zauważ, że IE10 będzie wspierać gradienty następująco:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Znaczna haczyka, jeśli chodzi o gradienty w IE jest to, że choć można użyć filtrów Microsoftu .. .
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
... zabijają wyraźny typ dla dowolnego tekstu objętego gradientem. Biorąc pod uwagę, że celem gradientów jest zwykle poprawianie interfejsu użytkownika, jest to dla mnie okazja.
W przypadku IE zamiast tego używam powtarzalnego obrazu tła. Jeśli obraz tła CSS jest połączony z gradientem CSS dla innych przeglądarek (jak na odpowiedź Blowsie), inne przeglądarki zignorują obraz w tle na korzyść gradientu css, więc ostatecznie będzie to miało zastosowanie do IE.
background-image: url('/Content/Images/button-gradient.png');
Istnieje wiele witryn, z których można szybko wygenerować tło gradientowe; Używam this.
Doskonałe narzędzie firmy Microsoft, pozwala na zbadanie kolorów w czasie rzeczywistym i generuje CSS dla wszystkich przeglądarek: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
dwie rzeczy odkryłem podczas gdy zmaga się z IE 9 gradientu.
- Nie działa dla mnie
-ms-filter
. Musiałem użyć po prostufilter
. - Musiałem dodać
height: 100%
do mojej klasy dla IE, aby użyć gradientu.
można było sprawdzić [CSS3Pie] (http://css3pie.com/), który jest skryptem dla IE, aby dodać obsługę niektórych funkcji CSS, w tym gradientów. Działa również w IE9. – Spudley
- 1. Cień tekstu w przeglądarce Internet Explorer?
- 2. History.js nie działa w przeglądarce Internet Explorer
- 3. Błąd nieprawidłowej daty w przeglądarce Internet Explorer
- 4. PLANDEKI stronę w przeglądarce Internet Explorer
- 5. Internet Explorer 6 testowanie
- 6. Wklejanie nasłuchiwania zdarzeń w przeglądarce Internet Explorer uzyskiwanie niepoprawnych argumentów
- 7. nowy dźwięk() nie jest zaimplementowany w przeglądarce Internet Explorer
- 8. Odmowa zgody na kliknięcie linku w przeglądarce Internet Explorer 11
- 9. Jak wprowadzić autofocus wprowadzania danych w przeglądarce Internet Explorer?
- 10. Pływak pozostawiony nie działa w przeglądarce Internet Explorer 8
- 11. Moja niestandardowa czcionka nie chce działać w przeglądarce Internet Explorer
- 12. left: initial nie działa w przeglądarce Internet Explorer
- 13. CSS: Proste gradienty w przeglądarce Internet Explorer <= 8
- 14. Przeglądarka obrazów JavaScript nie działa w przeglądarce Internet Explorer
- 15. pozycja: względna ukrywa obramowanie w przeglądarce Internet Explorer
- 16. Niesamowita czcionka nie pojawia się w przeglądarce Internet Explorer 8
- 17. Blob URL w przeglądarce Internet Explorer z angularjs
- 18. Przeniesienie aktywnego elementu traci wydarzenie mouseout w przeglądarce Internet Explorer
- 19. Jquery $ .get lub $ .ajax nie działa w przeglądarce Internet Explorer
- 20. -webkit-transform nie działa w przeglądarce Internet Explorer
- 21. Internet Explorer Jumpy Scrolling
- 22. Internet Explorer toDataURL() alternatywa?
- 23. Maska CSS w programie Internet Explorer 10
- 24. setTimeout Internet Explorer
- 25. Sesja w elemencie iframe działa w przeglądarce Firefox, ale nie w przeglądarce Internet Explorer
- 26. skrótów Wyłącz Internet Explorer
- 27. Dlaczego mój osadzony film z YouTube działa w przeglądarce Firefox, ale nie w przeglądarce Internet Explorer?
- 28. Dlaczego ta lista rozwijana do sortowania działa w przeglądarce Internet Explorer, ale nie w przeglądarce Chrome?
- 29. Internet Explorer - Współczynnik proporcji Flexbox
- 30. Menu kontekstowe paska narzędzi przeglądarki Internet Explorer
Jedna mała uwaga: Znalazłem mały błąd podczas pracy nad IE9. Jeśli nie przeliterujesz całego koloru HEX, nie będzie działać poprawnie. tj. #cccccc NIE #ccc Mam nadzieję, że to pomoże. –
Należy zachować ostrożność, stosując gradienty w wierszach tabeli. IE wydaje się traktować je inaczej, więc aby uzyskać odpowiedź na jakiekolwiek inne rozwiązanie tego problemu, musisz zawinąć zawartość tr w element div i zastosować do niej gradient. – Keith
Uważam, że szukasz [tego konkretnego ustawienia CSS] (http://msdn.microsoft.com/en-us/library/ms532997.aspx). – tsilb