Abgerundete Ecken in IE 7+ mit / ohne Javascript?

8

Um abgerundete Ecken auf meinen Containerelementen zu erzeugen, benutze ich diese CSS ...

%Vor%

Allerdings scheint IE die border-radius -Eigenschaft nicht zu erkennen und zu interpretieren (mindestens Version 7-8, anscheinend ist sie für Version 9 vorgesehen).

Gibt es einen Workaround dafür, der komplett in CSS möglich ist (kein Skript, kein extra Markup)?

Für Javascript / jQuery-Lösungen: Ich würde eine Lösung verwenden, die auf diesen basiert, wenn ich ein einzelnes Skript einschließen könnte, das meine css liest, die border-radius-Eigenschaften interpretiert ( einschließlich border-top-left-radius, border-top-right-radius) und wendet die Ecken entsprechend an. Gibt es das?

    
Scott B 17.12.2010, 14:08
quelle

5 Antworten

13

Soweit ich es für IE & lt; 9 kenne, gibt es keine Möglichkeit, dies in reinem CSS zu tun.

Es wurde dokumentiert, dass IE9 Grenzradien unterstützt.

Es gibt Javascript-Problemumgehungen verfügbar , aber wie du gesagt hast, du willst sie nicht implementieren, du bist ein bisschen festgefahren.

Sofern Sie keine Bilder verwenden möchten, funktioniert dies gut, wenn Sie statische Größenelemente haben, funktioniert aber nicht, wenn sie die Größe ändern.

Abgesehen davon ist mir keine reine CSS-Lösung bekannt, ohne viel Hacky Markup.

Aktualisieren :

Ich habe bereits eine Ressource verlinkt, die das für Sie tun kann, die CurvyCorners jQuery erkennt die Verwendung von -webkit-border-radius und moz-border-radius auf DOM-Elementen und dupliziere den Effekt in IE mit einer Reihe kleiner DIVs ohne Bilder. Sie können ihm auch sagen, dass er den Effekt auf bestimmte Elemente anwenden soll.

Update # 2 :

Nach Spudleys Vorschlag, CSS3Pi auszuprobieren, würde ich dies sehr empfehlen, da es die CSS-Eigenschaft% co_de verwendet %, was nur für IE gilt, also wird es nicht mit den anderen Browsern verschmelzen, auch dies bedeutet, dass kein Hacky-Markup zu Ihrer Seite hinzugefügt wird (Curvy Corners fügt viele kleine divs hinzu) und keine Verwendung von Bildern.

Ich hoffe, es hilft:)

    
Kyle 17.12.2010, 14:13
quelle
6

Sie fragen nach einer Möglichkeit, dies ohne Scripting und ohne zusätzliches Markup zu tun. Das ist einfach nicht möglich. Die Funktion fehlt in IE7 / 8, und die einzige Möglichkeit, IE dazu zu bringen, ist das Simulieren der Funktion entweder mit Scripting oder Markup.

Die besten Optionen sind diejenigen, die nur den IE betreffen und für andere Browser unsichtbar sind. Das bedeutet, dass CSS3Pie über alle anderen Optionen hinweg steht, da die verwendete Technik nur von IE unterstützt wird. Außerdem können Sie Ihren Umrandungsradius in CSS auf die gleiche Weise wie bei anderen Browsern festlegen und so konsistenter gestalten.

Ich persönlich würde jedes Mal auf diese Lösung zurückgreifen. Es ist bei weitem die sauberste Lösung, die Sie für IE finden. Vergessen Sie jQuery oder reine Javascript-Lösungen. sie haben fast alle Probleme der einen oder anderen Art, und für Markup-Optionen, die Eckgrafiken betreffen; Denken Sie nur nicht darüber nach!

Der wirkliche Vorteil, den CSS3Pie gegenüber anderen gebräuchlichen Lösungen hat, ist, dass es eine auf Vektorgrafiken basierende Lösung verwendet, anstatt viele Divs in Ihr Dokument einzufügen, wie es CurvyCorners und andere tun. Dies bedeutet, dass die abgerundeten Ecken, die CSS3Pie erzeugt, gleichmäßig gezeichnet werden und ordnungsgemäß mit Hintergrundgrafiken sowohl auf dem Element selbst als auch auf den dahinter liegenden Elementen funktionieren. Die meisten anderen Lösungen haben ernsthafte Probleme in diesen Bereichen.

Ich weiß nicht, wieso Sie gegen die Verwendung von Skripten wären - besonders HTC-basierte, die den anderen Skripten nicht im Weg stehen. Der absolut schlimmste Fall ist, dass ein Benutzer Skripting deaktiviert hat. Und in diesem Fall sind alles, was sie bekommen, eckige Ecken; Es ist nicht das Ende der Welt.

    
Spudley 17.12.2010 14:37
quelle
3

Ich denke nicht, dass es eine Möglichkeit gibt, dies ohne Skripting zu tun.

Ich habe dieses Projekt gesehen: Ссылка

Aber es erfordert immer noch ein Skript, das als HTC-Verhalten geladen wird.

Wie auch immer, meine beste Antwort besteht darin, die Ecken im IE zu quadrieren (übrigens scheint es, dass IE9 den Grenzradius unterstützt), das graceful degradation -Prinzip anzuwenden.

Viele Websites tun dies, darunter auch sehr beliebte: siehe twitter.com (es sieht im IE alles quadratisch aus)

    
achairapart 17.12.2010 14:26
quelle
2

Sie können .htc für den Grenzradius verwenden.
link1 für htc-dateien
link2 für htc-dateien

Ich schlage vor, einen Blick auf diese Seite zu werfen.
CSS3 Bitte

    
Fatih 17.12.2010 14:24
quelle
1

Die Scripting / jQuery-Lösung, über die Sie sprechen, ist vorhanden. Schauen Sie jQuery Curvy Corners .

    
jeroen 17.12.2010 14:33
quelle

Tags und Links