Gradient nie jest zaokrąglana w IE9

Utworzyłem przycisk zaokrąglony narożnik i IE9 gradient tło nie jest zaokrąglana:Gradient nie jest zaokrąglana w IE9

Square instead of rounded

Oto CSS:

.search button { 
    padding: 10px; 
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif; 
    font-size: 16px; 
    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
}

Jak można Naprawię to?

Źródło

2013-03-19 Andrei

[troll] użyć prawdziwej przeglądarki? [/ Troll] – njzk2

Spójrz na to pytanie: http: // stackoverflow.com/questions/4692686/I9-border-radius-and-background-gradient-krwawienie –

Używam prawdziwej przeglądarki, ale mój klient nie :) – Andrei

Usuń styl filtr ze swojej klasy css.

JS Fiddle Example

Jeśli chcesz gradientu dla IE8 i poniżej, to trzeba utworzyć oddzielny plik CSS i zawinąć go w ten sposób:

<!--[if lte IE 8]> 
[css path here] 
<![endif]-->

Nie można mieć zarówno gradient i zaokrąglony przycisk narożny w IE9. W rzeczywistości struktura Bootstrap na Twitterze pogarsza przyciski IE9 do jednolitego koloru tła z zaokrąglonym rogiem.

Źródło

2013-03-19 18:31:15 ROFLwTIME

W IE9 tak się dzieje dla wszystkich elementów z zaokrąglonymi narożnikami i gradientami CSS, nie tylko przyciski. Przydatną opcją zastępczą jest użycie obrazu tła zamiast gradientu CSS. –

IE9 to doskonale dobra przeglądarka; Problem polega na używaniu starych stylów filter.

Nigdy nie były dobre i zostały naprawdę pozostawione w IE9 ze względu na starsze wsparcie. Jest w nich mnóstwo dziwactw, w tym ten, który jest dość dobrze znany.

Twoim problemem jest to, że IE9 nie obsługuje standardowych gradientów CSS, więc pytanie, co zrobić zamiast filter, jeśli chcesz z nich korzystać?

Istnieją różne odpowiedzi, ale najlepsze to CSS3Pie.

To jest trochę biblioteka javascript, która pozwala używać standardowych gradientów CSS w IE9 (i wszystkich innych wersjach IE od IE6). Dodaje także border-radius i box-shadow dla wersji IE, które i tak ich nie obsługują.

Jest dyskretny i nie powoduje dodatkowych kosztów w innych przeglądarkach.

CSS3Pie używa języka graficznego języka IE, VML do renderowania gradientów, dlatego nie ma na nie wpływu błąd filter.

Jeśli naprawdę chcesz uniknąć używania Javascript, możliwe jest utworzenie dla siebie elementu VML lub SVG z gradientem. Można to zrobić za pomocą kodu CSS za pomocą kodującego URI obrazu (przykład here). Ale znacznie łatwiej pozwolić CSS3Pie zrobić to za Ciebie.

Jedyne inne dostępne rozwiązania to albo ładowanie starej grafiki w tle, albo po prostu dostarczanie jednolitego koloru tła jako opcji zastępczej.

Powinieneś prawdopodobnie dostarczyć awaryjny zwykły kolor i tak, ale w tym przypadku moje pieniądze na CSS3pie są najlepszym rozwiązaniem.

Nadzieję, że pomaga.

Źródło

2013-03-19 20:21:48 Spudley

Gradient nie jest zaokrąglana w IE9

Odpowiedz

Powiązane problemy