2013-07-24 10 views
19

Ich würde gerne wissen, wie Border-Radius auf IE8 und unter IE8 Browser anwenden.Wie Grenzradius in IE8 und unter IE8 Browser anwenden?

Ich weiß, dass Border-Radius eine HTML5-Funktion ist und IE8 es nicht unterstützt.

Ich fand, dass mit der Verwendung von .htc können wir dies erreichen, aber mit HTC Ich stoße auf das Problem von schwarzem Hintergrund.

Ich bin nicht in der Lage, dieses Problem zu überwinden.

Gibt es eine andere Möglichkeit, den Grenzradius auf IE8 anzuwenden? Wenn ja, kann mir das jemand erklären?

+0

Welche Art von Problem mit Hintergrund? – YD1m

Antwort

46
+1

Ich konnte mit jquery.corner.js tun, aber die Kanten sind nicht glatt genug in IE8 und mit css3pie.com der Hintergrund wird schwarz in IE8 – user2594152

+0

Blue Amboss Link ist tot wie tot jetzt sein kann .... –

+0

@MattFletcher hat den Link aktualisiert. –

3

PIE macht Internet Explorer 6-9 der Lage

http://css3pie.com/

einige der nützlichsten CSS3 Dekoration Features Rendering ....................... .................................................. .......

0

Wie die Antwort oben gesagt, CSS PIE macht Dinge wie border-radius und Box -Schatten arbeiten in IE6-IE8: http://css3pie.com/

Das sagte ich habe immer noch Dinge etwas flockig bei der Verwendung von PIE gefunden und jetzt nur akzeptieren, dass Menschen mit älteren Browsern nicht abgerundete Ecken und Dropshadows zu sehen.

0

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.htc-Datei kann von http://www.css3pie.com

+0

Hast du das gelesen "... IE8 und darunter ..."? –

7

heruntergeladen werden Erstens ist für die technische Genauigkeit border-radius keine HTML5-Funktion, es ist eine CSS3-Funktion.

Das beste Skript, das ich gefunden habe, um Box-Schatten zu rendern & abgerundeten Ecken in älteren IE-Versionen ist IE-CSS3. Es übersetzt CSS3-Syntax in VML (eine IE-spezifische Vektorsprache wie SVG) und rendert sie auf dem Bildschirm.

Es funktioniert viel besser auf IE7-8 als auf IE6, unterstützt aber auch IE6. Ich dachte nicht viel an PIE, als ich es benutzte und fand heraus, dass es (wie HTC) nicht wirklich funktional gebaut war.

+0

Diese Antwort ist sehr Standard. CSS3 Pie erfordert, dass z-index und position: relative bei einigen Eltern-Divs korrekt gerendert werden, was sich auf das gesamte Design auswirkt. UPvoteD. – Sakthivel

1

Die Eigenschaft border-radius wird in IE9 +, Firefox 4+, Chrome, Safari 5+ und Opera unterstützt, da es sich um CSS3-Eigenschaft handelt. ja, könnten Sie css3pie

erste Prüfung diese Demo in IE 8 und laden Sie es von here schreiben Sie Ihre CSS-Regel wie dieses

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

Note verwenden: hinzugefügt behavior: url(path/to/pie_files/PIE.htc); in der obigen Regel. Innerhalb von URL() müssen Sie Ihre PIE.htc Datei Ort angeben