Die kurze Antwort ist, dass Sie ohne CSS3 nicht alles machen können, was Sie wollen - das ist nur in den neuesten Versionen von Browsern implementiert.
Also, die Antwort ist, entweder CSS3 (wie von Sohnee oben beschrieben) zu verwenden oder die javascript / divs / images-Lösungen zu lieben. Und stellen Sie sicher, dass es in Ordnung angezeigt wird, wenn ein Browser, der keines davon anzeigt, darauf schaut ...
Ich möchte einen cross-browser machen (FF3, IE6, Safari, Opera), W3C gültig (HTML und CSS), dehnbar (horizontal vertikal), ohne JavaScript und mit Semantic und weniger HTML-Markup Round CORNER . Bilder können für IE6 verwendet werden.
Ich habe viele Techniken in der Community getestet und getestet. Aber alles hat eines der oben genannten Probleme. Wenn jemand weiß, was ich will, bitte teilen Sie mit mir?
Denken Sie daran, ich möchte es ohne irgendeine Art von JavaScript, Jquery oder irgendeine Art von js machen.
Dies sollte Ihnen ermöglichen, das gewünschte Ergebnis zu erhalten. Alte gestapelte DIVs-Methode, mit einem einzigen großen Hintergrundbild. Sie müssen ein sehr großes Hintergrundbild, z. 2000 x 2000 Pixel, wo Sie ein Rechteck mit abgerundeten Ecken zeichnen. Ich empfehle, es als .GIF mit transparentem Hintergrund zu speichern, um die Kompatibilität mit IE6 zu gewährleisten, da Sie JavaScript vermeiden möchten. Beachten Sie, dass die Grenzen im Beispiel nur dazu dienen, herauszufinden, wo das Element erscheint und entfernt werden kann.
Ich habe es auf IE6, IE7, Firefox 2 und 3, Safari und Opera getestet. Hoffe, das hilft.
%Vor%Sie können die hier beschriebene Technik hier verwenden (für einen Apple Dashboard Widget, aber das HTML / CSS sollte das gleiche sein). Es verwendet neun Bilder und benötigt kein JavaScript.
Steve
Ich weiß nicht, was Sie mit semantischen oder dehnbaren abgerundeten Ecken meinen, aber Sie können die CSS-Attribute border-radius für Webkit und Firefox verwenden und einfach eine Kombination aus PNG-Bildern und diese HTML-Komponente , die den IE6 um Unterstützung für PNG-Alpha-Kanäle erweitert.
Wenn Sie ein PNG8 mit Alpha-Transparenz verwenden, können Bilder Transparenz in IE6 haben. Die Vorbehalte sind, dass Sie nur vollständig transparente oder undurchsichtige Bilder haben können (alles dazwischen wird nur zu 100% transparent dargestellt) und Sie können keine große Farbpalette oder Farbverläufe verwenden.
Je nach Design gibt es eine mögliche Problemumgehung oder Sie können diese Option in Verbindung mit der obigen Option PNG8 verwenden. Wenn Ihr Hintergrund einfach ist, können Sie alles außerhalb der Ecken mit dem Hintergrund vergleichen. Mit dieser Technik können Sie leicht mit einem einzelnen Bild für Ihre Ecken auskommen, wenn Sie Sprites verwenden. Das Markup würde folgendermaßen aussehen:
%Vor%Und das CSS:
%Vor%Dieser Ansatz hat Vor- und Nachteile:
Vorteile
Es ist browserübergreifend, es funktioniert mit flüssigen und festen Layouts, und Sie können es für Menüeinträge (Hover funktioniert in IE6 für Links) oder Container verwenden, es benötigt kein JavaScript, Wenn Sie ein CSS-Sprite verwenden, können Sie dies mit einem einzigen Bild tun, sogar mit mehreren Eckentypen.
Nachteile
Es funktioniert nicht mit jedem Layout, Ränder können knifflig oder hässlich sein, es fügt ein paar zusätzliche Elemente in das Markup ein, und wenn Sie es für ein Linkelement mit einem Hover-Effekt verwenden, hat IE6 einen Hover-Flicker, der das kann nur mit ein wenig JavaScript gelöst werden. Dieses JavaScript ist jedoch nur eine Zeile und kann in einen bedingten Kommentar eingefügt werden:
%Vor%Das ist das Beste, was ich bis jetzt gefunden habe.
Es ist ein Cross-Browser, W3C ist gültig und verwendet nur ein Bild . aber wir können uns nicht damit abfinden.
Diese Lösung für eine feste Breite mit Rand.
es verwendet wenig Markup ' Inhalt
" mit gültigem CSS, HTML Ссылка
Wenn es Ihnen nichts ausmacht, Javascript nur für IE zu verwenden, können Sie bedingte Kommentare und Javascript verwenden, um dynamisch VML-Roundrects einzufügen, die das tun können, was Sie wollen (oder einfach nur statisch bedingt kommentierte VML verwenden). Der CSS3-Rahmenradius deckt Gecko, WebKit und KHTML ab. Opera benötigt ein SVG-Hintergrundbild.
Hier ist ein Beispiel aus einem meiner Projekte: Ссылка
Mir wurde gesagt, dass es immer noch einige WebKit-Bugs gibt, die sich auf Hintergrundfärbung beziehen, aber es funktioniert in allem anderen gut.
Ich bin ziemlich sicher, dass die minimale non js abgerundete Ecke Technik für ie6 / 7 2 kleine Bilder (oben und unten) und 1 extra div für Boxen fester Breite und 3 kleine Bilder (unten, links und rechts) und 3 erfordert extra divs für eine Box mit variabler Breite.
Feste Breite
%Vor%Variable Breite
%Vor%Wenn Sie eine abgerundete Umrandung und nicht nur einen abgerundeten, durchgehenden Hintergrund wünschen, können Sie die oben genannten Einstellungen mit Rand, Negativrand, Position relativ / absolut, Breite und Hintergrundbild optimieren, aber nicht von oben von meinem Kopf wie.
Die beiden wichtigsten Rendering-Engines haben CSS3 schon seit einiger Zeit unterstützt, was abgerundete Ecken so einfach macht wie:
%Vor% Natürlich hat das keine Auswirkungen auf IE6 oder 7 (es funktioniert in IE8) oder 8, also müssen Sie die böse gestapelte Division mit Bildern für die Ecken implementieren, was nicht funktioniert. t passen Sie Ihre semantische Anforderung.
Ich bin kein Fan von Display-Hacks mit Javascript oder CSS-Hacks - also benutze ich CSS3 und überprüfe, ob die quadratische Version in IE7 akzeptabel aussieht. Ich mache das schon seit einer Weile, da IE früher auch keine PNG-Transparenz unterstützte - was bedeutete, dass man ein gerundetes Eckbild auf einem gemusterten Hintergrund nicht schön überlagern konnte. IE8 ist eine große Verbesserung, also beginnt das Problem zu verschwinden - aber ich verstehe Ihren Wunsch, es mit IE6 und höher arbeiten zu lassen.
UPDATE: Verschiedene CSS3-Teile, die ursprünglich in IE8 enthalten sein sollten, wurden aus der endgültigen Version entfernt. Grenzradius war eines der Opfer.
Hallo, ich musste vor kurzem das gleiche Problem lösen, Ein veränderbares Widget mit abgerundeten Ecken, Innenrand, Schlagschatten und einem Hintergrund mit Farbverlauf. Es muss auch auf allen Browsern (IE6 enthalten) funktionieren.
Wenn Sie photoshop verwenden und Ihre Quelldateien ordnungsgemäß verwalten, ist das ziemlich einfach. Insgesamt benötigt es 4 Bilder (bis zu 7, je nachdem, wie Sie IE6 unterstützen), diese können alle aus der ursprünglichen Photoshop-Datei geschnitten werden, so ist es ziemlich einfach.
Sehen Sie sich den folgenden Link an.
Hier sind ein paar Methoden, die für alle Browser funktionieren:
Die beste Lösung ist CSS3Pie .
Es ermöglicht Ihnen, abgerundete Ecken mit CSS zu IE hinzuzufügen.
Sie können CSS border-radius für alle anderen Browser und CSS3Pie für IE verwenden.
Es verwendet den IE-spezifischen Stil %code% , also ist es kein Standard-CSS, aber es bedeutet, dass Sie semantisches HTML (keine unechten divs für das Layout) richtig erhalten und Sie sich keine Gedanken über JQuery-Plugins machen müssen entweder.
Es ist Javascript (von Art), aber muss nur auf IE laufen; Alle anderen Browser verwenden normales CSS, um damit umzugehen, und laden nicht einmal den IE-spezifischen Code.
(Btw IE9 unterstützt jetzt Border-Radius ... aber natürlich, IE6 / 7/8 sind alle noch da draußen und wird für einige Zeit zu kommen)
Ich möchte einen cross-browser machen (FF3, IE6, Safari, Opera), W3C gültig (HTML und CSS), dehnbar (horizontal vertikal), ohne JavaScript und mit Semantic und weniger HTML-Markup Round CORNER . Bilder können für IE6 verwendet werden.
Ich habe viele Techniken in der Community getestet und getestet. Aber alles hat eines der oben genannten Probleme. Wenn jemand weiß, was ich will, bitte teilen Sie mit mir?
Denken Sie daran, ich möchte es ohne irgendeine Art von JavaScript, Jquery oder irgendeine Art von js machen.
Die beiden wichtigsten Rendering-Engines haben CSS3 schon seit einiger Zeit unterstützt, was abgerundete Ecken so einfach macht wie:
%Vor% Natürlich hat das keine Auswirkungen auf IE6 oder 7 (es funktioniert in IE8) oder 8, also müssen Sie die böse gestapelte Division mit Bildern für die Ecken implementieren, was nicht funktioniert. t passen Sie Ihre semantische Anforderung.
Ich bin kein Fan von Display-Hacks mit Javascript oder CSS-Hacks - also benutze ich CSS3 und überprüfe, ob die quadratische Version in IE7 akzeptabel aussieht. Ich mache das schon seit einer Weile, da IE früher auch keine PNG-Transparenz unterstützte - was bedeutete, dass man ein gerundetes Eckbild auf einem gemusterten Hintergrund nicht schön überlagern konnte. IE8 ist eine große Verbesserung, also beginnt das Problem zu verschwinden - aber ich verstehe Ihren Wunsch, es mit IE6 und höher arbeiten zu lassen.
UPDATE: Verschiedene CSS3-Teile, die ursprünglich in IE8 enthalten sein sollten, wurden aus der endgültigen Version entfernt. Grenzradius war eines der Opfer.
Die kurze Antwort ist, dass Sie ohne CSS3 nicht alles machen können, was Sie wollen - das ist nur in den neuesten Versionen von Browsern implementiert.
Also, die Antwort ist, entweder CSS3 (wie von Sohnee oben beschrieben) zu verwenden oder die javascript / divs / images-Lösungen zu lieben. Und stellen Sie sicher, dass es in Ordnung angezeigt wird, wenn ein Browser, der keines davon anzeigt, darauf schaut ...
Die beste Lösung ist CSS3Pie .
Es ermöglicht Ihnen, abgerundete Ecken mit CSS zu IE hinzuzufügen.
Sie können CSS border-radius für alle anderen Browser und CSS3Pie für IE verwenden.
Es verwendet den IE-spezifischen Stil behavior , also ist es kein Standard-CSS, aber es bedeutet, dass Sie semantisches HTML (keine unechten divs für das Layout) richtig erhalten und Sie sich keine Gedanken über JQuery-Plugins machen müssen entweder.
Es ist Javascript (von Art), aber muss nur auf IE laufen; Alle anderen Browser verwenden normales CSS, um damit umzugehen, und laden nicht einmal den IE-spezifischen Code.
(Btw IE9 unterstützt jetzt Border-Radius ... aber natürlich, IE6 / 7/8 sind alle noch da draußen und wird für einige Zeit zu kommen)
Dies sollte Ihnen ermöglichen, das gewünschte Ergebnis zu erhalten. Alte gestapelte DIVs-Methode, mit einem einzigen großen Hintergrundbild. Sie müssen ein sehr großes Hintergrundbild, z. 2000 x 2000 Pixel, wo Sie ein Rechteck mit abgerundeten Ecken zeichnen. Ich empfehle, es als .GIF mit transparentem Hintergrund zu speichern, um die Kompatibilität mit IE6 zu gewährleisten, da Sie JavaScript vermeiden möchten. Beachten Sie, dass die Grenzen im Beispiel nur dazu dienen, herauszufinden, wo das Element erscheint und entfernt werden kann.
Ich habe es auf IE6, IE7, Firefox 2 und 3, Safari und Opera getestet. Hoffe, das hilft.
%Vor%Sie können die hier beschriebene Technik hier verwenden (für einen Apple Dashboard Widget, aber das HTML / CSS sollte das gleiche sein). Es verwendet neun Bilder und benötigt kein JavaScript.
Steve
Ich weiß nicht, was Sie mit semantischen oder dehnbaren abgerundeten Ecken meinen, aber Sie können die CSS-Attribute border-radius für Webkit und Firefox verwenden und einfach eine Kombination aus PNG-Bildern und diese HTML-Komponente , die den IE6 um Unterstützung für PNG-Alpha-Kanäle erweitert.
Wenn Sie ein PNG8 mit Alpha-Transparenz verwenden, können Bilder Transparenz in IE6 haben. Die Vorbehalte sind, dass Sie nur vollständig transparente oder undurchsichtige Bilder haben können (alles dazwischen wird nur zu 100% transparent dargestellt) und Sie können keine große Farbpalette oder Farbverläufe verwenden.
Je nach Design gibt es eine mögliche Problemumgehung oder Sie können diese Option in Verbindung mit der obigen Option PNG8 verwenden. Wenn Ihr Hintergrund einfach ist, können Sie alles außerhalb der Ecken mit dem Hintergrund vergleichen. Mit dieser Technik können Sie leicht mit einem einzelnen Bild für Ihre Ecken auskommen, wenn Sie Sprites verwenden. Das Markup würde folgendermaßen aussehen:
%Vor%Und das CSS:
%Vor%Dieser Ansatz hat Vor- und Nachteile:
Vorteile
Es ist browserübergreifend, es funktioniert mit flüssigen und festen Layouts, und Sie können es für Menüeinträge (Hover funktioniert in IE6 für Links) oder Container verwenden, es benötigt kein JavaScript, Wenn Sie ein CSS-Sprite verwenden, können Sie dies mit einem einzigen Bild tun, sogar mit mehreren Eckentypen.
Nachteile
Es funktioniert nicht mit jedem Layout, Ränder können knifflig oder hässlich sein, es fügt ein paar zusätzliche Elemente in das Markup ein, und wenn Sie es für ein Linkelement mit einem Hover-Effekt verwenden, hat IE6 einen Hover-Flicker, der das kann nur mit ein wenig JavaScript gelöst werden. Dieses JavaScript ist jedoch nur eine Zeile und kann in einen bedingten Kommentar eingefügt werden:
%Vor%Wenn es Ihnen nichts ausmacht, Javascript nur für IE zu verwenden, können Sie bedingte Kommentare und Javascript verwenden, um dynamisch VML-Roundrects einzufügen, die das tun können, was Sie wollen (oder einfach nur statisch bedingt kommentierte VML verwenden). Der CSS3-Rahmenradius deckt Gecko, WebKit und KHTML ab. Opera benötigt ein SVG-Hintergrundbild.
Hier ist ein Beispiel aus einem meiner Projekte: Ссылка
Mir wurde gesagt, dass es immer noch einige WebKit-Bugs gibt, die sich auf Hintergrundfärbung beziehen, aber es funktioniert in allem anderen gut.
Ich bin ziemlich sicher, dass die minimale non js abgerundete Ecke Technik für ie6 / 7 2 kleine Bilder (oben und unten) und 1 extra div für Boxen fester Breite und 3 kleine Bilder (unten, links und rechts) und 3 erfordert extra divs für eine Box mit variabler Breite.
Feste Breite
%Vor%Variable Breite
%Vor%Wenn Sie eine abgerundete Umrandung und nicht nur einen abgerundeten, durchgehenden Hintergrund wünschen, können Sie die oben genannten Einstellungen mit Rand, Negativrand, Position relativ / absolut, Breite und Hintergrundbild optimieren, aber nicht von oben von meinem Kopf wie.
Hallo, ich musste vor kurzem das gleiche Problem lösen, Ein veränderbares Widget mit abgerundeten Ecken, Innenrand, Schlagschatten und einem Hintergrund mit Farbverlauf. Es muss auch auf allen Browsern (IE6 enthalten) funktionieren.
Wenn Sie photoshop verwenden und Ihre Quelldateien ordnungsgemäß verwalten, ist das ziemlich einfach. Insgesamt benötigt es 4 Bilder (bis zu 7, je nachdem, wie Sie IE6 unterstützen), diese können alle aus der ursprünglichen Photoshop-Datei geschnitten werden, so ist es ziemlich einfach.
Sehen Sie sich den folgenden Link an.
Hier sind ein paar Methoden, die für alle Browser funktionieren: