Cross-Browser geschwungene Ränder

Question

Was ist der beste Weg, um cross-browser (ff, dh> 6, Chrom, Oper, Safari) gebogenen Ecken auf einem div zu erreichen. Ich diesen Artikel gefunden http://jonraasch.com/blog/css-rounded-corners-in-all-browsers und ich habe Anweisungen Schritt für Schritt mehrere Male gefolgt, hier meine CSS ist:

#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 

<!--[if lte IE 8]> 
<style> 
#content_wrapper{ 
behavior: url(template/css/border-radius.htc); 
border-radius: 20px; 
} 
</style> 
<![endif]--> 

Kann jemand mir zeigen, was mache ich falsch oder gibt es einen besseren Weg, um die gleiche Wirkung zu erzielen, seine Arbeiten in allen Browsern außer in IE

Answer 1

Wenn das ein unmodifiziertes Snippet aus Ihrer HTML-Datei ist, ist es klar, warum es nicht funktioniert: Sie verwenden ein <style>-Tag in einem anderen <style>.

Als ersten Test, versuchen Sie einfach mit Ihrem gesamten Snippet ersetzen (entfernen Sie den IE spezifischen Block!):

#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    behavior: url(template/css/border-radius.htc); 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 

Wenn das funktioniert, können Sie die IE-spezifische Teile in einen separaten <style> bewegen:

<style type="text/css"> 
#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 
</style> 


<!--[if lte IE 8]> 
<style type="text/css"> 
#content_wrapper{ 
    behavior: url(template/css/border-radius.htc); 
    border-radius: 20px; 
} 
</style> 
<![endif]--> 

Wenn Sie immer noch Probleme haben, versuchen Sie das Beispiel Zip-Datei von der Website google: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Answer 2

Laden Sie die Datei .htc:

• http://curved-corner.googlecode.com/files/border-radius.htc

und legen Sie das in den Ordner ./template/css. Sehen Sie das Projekt http://code.google.com/p/curved-corner/ für Details (wie von dem Artikel, den Sie platziert haben, verknüpft).

Answer 3

Ein Zitat aus dem Artikel yo Du erwähnt:

Der Pfad zu border-radius.htc funktioniert anders als Sie erwarten - im Gegensatz zu Hintergrundbildpfaden, die relativ zum Stylesheet sind, ist dieser Pfad relativ zu der Seite, von der Sie das CSS aufrufen.

Deshalb ist es eine gute Idee, relative Pfade wie oben zu vermeiden.

Answer 4

könnten Sie setzen JQuery Curvy Corners alles aus der Box zu tun, statt zu verwenden.

Answer 5

hallo ich einfach nur faul sein werde und einen Link zu jemandem anderer Arbeit einfügen .... ich nicht

versuchen Sie diesen die Prämie will. Hier http://dillerdesign.com/experiment/DD_roundies/

Answer 6

ist die CSS:

.curved { 

-moz-border-radius:10px; 

-webkit-border-radius:10px; 

behavior:url(border-radius.htc); 

} 

Und hier ist, wie Sie es verwenden würde natürlich:

<div class="curved">Curvd div</div> 

Answer 7

Wenn Sie Interesse an abgerundeten Ecken im IE immer, dies auch sein mag - http://css3pie.com/