Obsługa „border-radius” w IE

158

Czy ktoś wie, czy / kiedy Internet Explorer będzie obsługiwał atrybut CSS „border-radius”?

internet-explorer css

— Tony the Pony
źródło

220

Tak! Kiedy IE9 zostanie wydany w styczniu 2011.

Powiedzmy, że chcesz mieć równe 15 pikseli ze wszystkich czterech stron:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 użyje wartości domyślnej border-radius, więc po prostu upewnij się, że uwzględnisz to we wszystkich stylach, nazywając promień obramowania. Wtedy Twoja witryna będzie gotowa na IE9.

-moz-border-radiusdotyczy przeglądarki Firefox, przeglądarki -webkit-border-radiusSafari i Chrome.

Ponadto: nie zapomnij zadeklarować, że kodowanie IE to ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Niektórzy leniwi programiści mają <meta http-equiv="X-UA-Compatible" content="IE=7" />. Jeśli ten tag istnieje, border-radius nigdy nie będzie działać w IE.

— Kevin Florida
źródło

7

Przypuszczalnie jeśli nie używasz metatagu kompatybilnego z X-UA, nie musisz go dodawać tylko po to, aby działał w IE9?

— thepeer

72

Powinieneś umieścić wersje prefiksów dostawcy PIERWSZE i standardowe OSTATNIE, tak aby przeglądarka obsługiwała rzeczywisty standard, zamiast wersji z prefiksem dostawcy.

— Jason Berry

4

Prawidłowo, nie potrzebujesz metatagu ... musisz tylko wymienić emulator ie7, jeśli jest dołączony. W przeciwnym razie nie martw się o to.

— Kevin Florida,

3

FYI w obecnej wersji beta IE9 „border-radius” działa poprawnie przy użyciu pojedynczej wartości. Wszystkie cztery wartości nie są wymagane, chyba że faktycznie chcesz, aby były różne.

— mikemaccana

2

@nailer: Dzięki za aktualizację rogów. Pierwsze alfa vs i beta vs IE9 wymagały zadeklarowania wszystkich 4 rogów. Właśnie pobrałem najnowszą wersję RC IE9 i pozwala mi zadeklarować jedną wartość .. Nie jestem pewien, kiedy to się zmieniło ..

— Kevin Florida

46

Odpowiedź na to pytanie zmieniła się od czasu, gdy zadano je rok temu. (To pytanie jest obecnie jednym z najlepszych wyników wyszukiwania w Google „border-radius ie”).

IE9 będzie obsługiwać border-radius.

Tam jest podgląd platforma dostępna który obsługuje border-radius . Do uruchomienia podglądu będziesz potrzebować systemu Windows Vista lub Windows 7 (i IE9, gdy zostanie wydany).

— David Johnstone
źródło

27

Podczas oczekiwania .. Zakrzywiony róg (border-radius) w przeglądarce

— Luis Melgratti
źródło

18

Obejście i przydatne narzędzie:

CSS3Pie używa plików .htc i właściwości behawioralnej do implementacji CSS3 w IE 6 - 8.

Modernizr to trochę javascript, który umieści klasy w twoim elemencie html, umożliwiając obsługę różnych definicji stylów dla różnych przeglądarek w oparciu o ich możliwości.

Oczywiście oba te elementy zwiększają obciążenie, ale w przypadku IE9, który działa tylko w systemie Vista / 7, możemy utknąć na jakiś czas. Od sierpnia 2010 r. System Windows XP nadal stanowi 48% systemów operacyjnych klientów WWW.

— Peter G.
źródło

2

CSS3 PIE był zdecydowanie najłatwiejszą i najmniej uciążliwą opcją.

— Chris Rasco,

12

Nie jest planowane dla IE8. Zobacz stronę Zgodność z CSS .

Poza tym żadne plany nie zostały wydane. Istnieją pogłoski, że IE8 będzie ostatnią wersją dla systemu Windows XP

— Ben S.
źródło

12

Oczywiście się mylisz, ponieważ IE9 ma obsługiwać również CSS3 i nie widzę nigdzie umierania IE. Ktoś

— musi

10

Okazuje się, że IE8 to ostatnia wersja ... na Windows XP.

— M. Dudley,

7

<!DOCTYPE html> bez tego tagu border-radius nie działa w IE9, nie ma potrzeby stosowania metatagów.

— JAVAC
źródło

6

Szybka aktualizacja tego pytania, IE9 będzie obsługiwać border-radius zgodnie z: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

— simonrjones
źródło

4

Użyj -ms-border-radius: 15px, każdy element, który używa css -ms-, jest zgodny z IE.

— Iago Bruno
źródło

2

Problem promienia narożnika IE zostanie rozwiązany.

http://kbala.com/ie-9-supports-corner-radius/

— jaya
źródło

2

A co z obsługą promienia obramowania ORAZ gradientu tła. Tak, IE9 obsługuje je oddzielnie, ale jeśli je pomieszasz, gradient spadnie z zaokrąglonego rogu. Poniżej znajduje się link do kiepskiego przykładu, ale widziałem go również w moich własnych testach. Powinienem zrobić zrzut ekranu :(

Być może prawdziwe pytanie brzmi, kiedy IE będzie obsługiwać standardy CSS bez zastrzeżonych hacków MS-FILTER.

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

— SigmaBetaTooth
źródło

IE10 będzie obsługiwał odpowiednie gradienty CSS3 (obecny podgląd programisty IE10 już obsługuje -ms-linear-gradient). Jeśli chcesz, aby gradienty honorowały border-radius w IE9, musisz użyć SVG (zewnętrznego pliku SVG lub takiego, który jest zakodowany w identyfikatorze URI danych) - zobacz css3wizardry.com/2010/10/29/css-gradients-for- ie9 - również CSS3 PIE wkrótce to zautomatyzuje, dostępna jest wersja testowa

— Lojjic

Szybkim rozwiązaniem jest owinięcie go w inny element. Nadaj elementowi nadrzędnemu ten sam border-radius i ustaw jego przepełnienie na ukryty.

— Senne

1

ROZWIĄZANE - niepoprawne renderowanie promienia obramowania w IE 10 i 11

Dla tych, którzy nie otrzymują -ms-border-radius: lub border-radius: do pracy w IE 10,11 I renderuje wszystko kwadratowe, a następnie wykonaj następujące kroki:

Kliknij koło zębate w prawym górnym rogu przeglądarki IE
Kliknij Ustawienia widoku zgodności
Teraz odznacz 2 pola, które są zaznaczone domyślnie.

Upewnij się, że pola nie są zaznaczone, jak na rys

— Allan Starr
źródło