Runde Ecken, CSS und Internet Explorer
Web Developer stöhnen bei diesem Thema. Deshalb der kleine Tipp eines „Betroffenen“. Gecko-browser wie Netscape, Mozilla und Firefox (mit -moz-prefix) und KHTML-Browser wie Safari und Konqueror (mit -khtml-prefix) können es bereits seit einiger Zeit. Für IE7 und IE8 gibt es den Hack CSS curved Corner. Und IE9 kann es nun auch, wie ich in einem neueren Projekt feststellen durfte. Allerdings nicht ohne die übliche stundenlange Suche nach dem Teufel im Detail. Die Vorgeschichte : Der Kunde wollte ein minimalistisches, elegantes Design. Abgerundete Ecken ala Apple sollten als Stilmittel herhalten …
[quote type=“quote1″ color=““ background=““ width=““ align=““ textshadow=““]No Problem … dache ich[/quote]
Denn ich wußte, alle Browser stellen es klaglos mit den bekannten CSS Attributen :
[php]
abgerundet {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
}
[/php]
dar.
Den Hack für IE7 und IE8 hinzufügen
[php]
.abgerundet {
behavior: url(‚/bst-systemtechnik/border-radius.htc‘);
}
[/php]
und der Kunde ist zufrieden. Ich wußte, dass der IE9 den „border-radius:10px;“ nativ unterstützt.
Der Show Down beim Kunden
Die Seite war wie immer WC3 validiert um alle Fehlerquellen auszuschließen. Ich fuhr gutgelaut zur Präsentation. Auf dem Kunden PC lief der IE9. Eigentich perfekt. Eingeben der URL und die Seite war blitzschnell da. Allerdings „without roundet Corners!“. Amüsiertes Erstaunen beim Kunden, Entsetzen bei mir … Also Plan B und Seite auf meinem Nootebook präsentiert. Der Kunde war zufrieden. Das Problem mit dem IE9 ist sicher schnell gelöst dachte ich. Doch weit gefehlt. Notwendig waren ca. 2 Stunden Recherche und Testen damit IE9 und alle anderen Browser funktionieren. Deshalb dieser kleine Tipp zur CSS Gestalltung und IE9.
Der Metatag :
[html]
<meta http-equiv="X-UA-Compatible" content="IE=8" />
[/html]
war der Störenfried.
Lösung :
Direkt unterhalb des einleitenden „Head“ Tag muss
[html]
<meta http-equiv="X-UA-Compatible" content="IE=9" />
[/html]
eingefügt werden, damit der Inernet Explorer 9 „border-radius:10px; /* CSS3 */“ umsetzt.
