Jak zastosować promień obramowania w przeglądarkach IE8 i poniżej IE8?

Question

Chciałbym wiedzieć, jak zastosować border-radius do IE8 i poniżej przeglądarek IE8.

Wiem, że promień obramowania jest funkcją HTML5, a program IE8 go nie obsługuje.

Znalazłem, że używając .htc możemy to osiągnąć, ale używając htc napotykam problem czarnego tła.

Nie jestem w stanie przezwyciężyć tego problemu.

Czy istnieje inny sposób zastosowania granicy promienia do IE8? Jeśli tak, to czy ktoś może mi wyjaśnić, w jaki sposób?

Answer 1

Wariant 1

http://jquery.malsup.com/corner/

Wariant 2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Wariant 3

http://css3pie.com/

Wariant 4

http://www.netzgesta.de/corner/

Opcja 5

See this question

EDIT: Opcja 6

https://code.google.com/p/jquerycurvycorners/

Answer 2

PIE sprawia Internet Explorer 6-9 stanie zapewnić kilka najbardziej przydatnych funkcji CSS3 dekoracji

http://css3pie.com/

....................... .................................................. .......

Answer 3

Jak powiedział odpowiedź powyżej, CSS PIE sprawia, że ​​takie rzeczy jak border-radius i skrzynki praca w cieniu w IE6-IE8: http://css3pie.com/

Powiedziałem, że nadal uważam, że pewne rzeczy są nieco niestabilne podczas używania PIE, a teraz po prostu zaakceptuj, że osoby korzystające ze starszych przeglądarek nie zobaczą zaokrąglonych narożników i cieni.

Answer 4

HTML:

<div id="myElement">Rounded Corner Box</div> 

CSS:

#myElement { 
    background: #EEE; 
    padding: 2em; 
    -moz-border-radius: 1em; 
    -webkit-border-radius: 1em; 
    border-radius: 1em; 
    behavior: url(PIE.htc); 
    border: 1px solid red; 

} 

PIE.Plik htc można pobrać z http://www.css3pie.com

Answer 5

Po pierwsze, ze względu na dokładność techniczną, border-radius nie jest funkcją HTML5, jest to funkcja CSS3.

Najlepszy skrypt, jaki znalazłem do renderowania cieni pudełkowych & zaokrąglone narożniki w starszych wersjach IE to IE-CSS3. Przekłada składnię CSS3 na język VML (język wektorowy specyficzny dla IE, np. SVG) i renderuje je na ekranie.

Działa znacznie lepiej na IE7-8 niż na IE6, ale obsługuje także IE6. Nie myślałem dużo PIE, gdy go użyłem i okazało się, że (tak jak HTC) nie było tak naprawdę zbudowane, by było funkcjonalne.

Answer 6

Właściwość border-radius jest obsługiwana w IE9 +, Firefox 4+, Chrome, Safari 5+ i Opera, ponieważ jest to właściwość CSS3. tak, można użyć css3pie

najpierw sprawdzić to demo w IE 8 i pobrać go z here napisać regułę CSS jak to

#myAwesomeElement { 
    border: 1px solid #999; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(path/to/pie_files/PIE.htc); 
} 

uwaga: dodano behavior: url(path/to/pie_files/PIE.htc); w powyższej reguły. w adresie URL() należy podać lokalizację pliku PIE.htc: