Irgendwie sind im Moment die der-Internet-Explorer-ist-gar-nicht-so-schlimm
-Wochen, aber egal: Das hier ist ziemlich abgefahren. Microsoft hat mal vor Äonen eine Technologie namens Vector Markup Language (VML) ausgebrütet, die vom W3C nicht als Standard aufgenommen wurde. Das ganze ist also im Allgemeinen also eher nutzlos, aber im IE < 8 noch vorhanden. Und mit dieser Technologie kann kann man runde Ecken bauen.
Zunächst nehme man ein VML-Element wie dieses und packe es in den Quellcode:
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
Das sagt dem Internet Explorer, dass wir seine seltsamen Vektortechniken zum Einsatz bringen wollen. Es folgt das Vektor-Element selbst:
<v:roundrect arcsize=".1" fillcolor="#000">HIER KOMMT INHALT HIN!</v:roundrect>
Dieses Ding ist die Box, die am Ende die runden Ecken tragen wird. Sodenn style man es, um es in normalen Browsern wie ein normales Block-Element mit border-radius
aussehen zu lassen …
v:roundrect { color:#FFF; display:block; background-color:#000; -moz-border-radius:10px; -webkit-border-radius: 10px; border-radius: 10px; padding:8px; height:100%; }
… und setze am Ende mit einem IE-Hack die background-color
für den Internet Explorer auf transparent
, da sich sonst background-color
und das fillcolor
-Attribut des VML-Elements gegenseitig das Leben schwer machen. Dazu gehört auch noch eine kleine behavior
-Deklaration:
v:roundrect { behavior:url(#default#VML); background-color:transparent; }
Fertig! Natürlich ist das ein Horror-Hack der übelsten Sorte, aber er funktioniert und eines Tages wird irgendwer einen Grund finden, ihn auch einzusetzen. Ich will das jetzt nicht ausprobieren, aber man könnte doch sicher so was in Javascript bauen (Pseudocode):
if(internetExplorer == true) { var elemente = get("Alle Elemente mit border-radius"); foreach(elemente as element) { element.ersetzeDurch("Microsofts Horror-Hack"); } }
Müsste man mal versuchen, geht sicher irgendwie.
Kommentare (12)
Webstandard-Team ¶
20. August 2008, 06:36 Uhr
Leider sind die Radien in den verschiedenen Versionen des IE unterschiedlich groß, aber nettes Feature ;o)
Markus ¶
20. August 2008, 06:51 Uhr
Hab's auch gelesen, aber ganz ehrlich: Dann müssen die IE-User lieber auf runde Ecken verzichten, als dass ich da stundenlang dran rumschraube ;-)
Was natürlich vertretbar wäre: Ein schmales Javascript, das den border-radius aus der CSS-Datei ausliest & passend umwandelt - nur das einbinden & sich nicht um den Rest kümmern, super :-D
Toni ¶
20. August 2008, 07:32 Uhr
Da fehlt noch der automatisch generierte Hinweis für IE8-Nutzer, den Browser zu downgreaden. ;)
Martin ¶
20. August 2008, 08:16 Uhr
Cool, vielen Dank.
captainhagbard ¶
20. August 2008, 10:11 Uhr
Die selbe funktionalität nutzt auch die JQuery Lib Corner.
Peter ¶
20. August 2008, 11:09 Uhr
Zitat Markus:
Stundenlang müsste es ja nicht sein, wenn man das mit JS automatsieren würde.
Markus ¶
20. August 2008, 11:52 Uhr
Zitat Peter:
Richtig - daher werd ich mir mal die oben angemerkte jQuery-Lib anschauen :-)
Siegfried ¶
20. August 2008, 17:33 Uhr
Nach so einer neuen Langzeitstudie sind Horrorszenarien der zweitwichtigste Grund für gewalt unter Jugendlichen. Ich dachte zwar, die meinen damit vor Allem Filme, aber wenn ich das hier so lese... :)
Thomas ¶
2. Oktober 2008, 13:45 Uhr
VML gibt es auch im IE8 noch! Das zeug geht bloss nicht mehr da weill hier behaviours verwendet werden!
Abro ¶
27. Juli 2009, 09:41 Uhr
Yey - you make my day =)
Das mit den Runden Ecken ist ja generell ein Grauß wenn man vernünftiges Markup haben will und ggf. k(l)eine Images mag.
Dass Scriptaufrufe aus CSS heraus für den IE8 nicht mehr gehn wusst ich noch gar nicht, danke ^^
Manchmal wünscht man sich ja wir wären schon 5 Jahre weiter ... -moz-border-radius gibt's schon eine ganze Zeit, da wäre Microsoft jetzt wirklich mal gefordert gewesen.
Na dann geh ich jetzt mal spielen und greife danach auch wieder auf jQuery zurück *zwinker*
Abro ¶
27. Juli 2009, 10:36 Uhr
Ich hasse Doppelkommentare >.< ..ker ist das peinlich...
Runde Ecken mit HTC & VML, getestet im IE8-5.5 (was gruselig ist):
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser/
Erdi ¶
18. Januar 2010, 20:52 Uhr
in opera 10.50 pre-alpha funktioniert border-radius