Wer schon mal Layouts für arabische Websites umgesetzt hat, kennt sicherlich das HTML-Attribut “dir“, das man z.B. im body-Tag einfügen kann um die Leserichtig des Dokuments von links-nach-rechts auf rechts-nach-links zu ändern. In CSS ist die Anweisung “direction” dafür zuständig. Für beide Möglichkeiten kann man die Werte “rtl” (right-to-left) oder “ltr” (left-to-right) sowie “auto” angeben.
Hat man im Layout, runde Ecken (border-radius) nur an einer Seite, z.B. rechts abgerundet, dann sind im IE9 die Ecken allerdings links abgerundet. Der IE9 dreht von sich aus die runden Ecken im RTL-Modus um. Das ist zwar nett vom IE9, aber nicht richtig und auch nicht immer gewollt. Bei gleichmäßig abgerundeten Ecken kann man den Bug natürlich nicht nachvollziehen, deshalb fällt er selten auf.
Hier mal ein jsFiddle-Beispiel:
Im IE9 sieht das allerdings so aus (Screenshot):
Der simplifizierte HTML-Aufbau:
<body dir="rtl">
<div class="box"> right to left </div>
</body>
CSS:
.box {
background-color: red;
padding: 48px;
height: 100px;
width: 200px;
margin: 40px;
border-radius: 0 48px 48px 0;
}
Den Bug muss man nun per Conditional-Comments für den IE9 entgegnen und die angerundeten Ecken “umdrehen”:
<!--[if IE 9]>
<style>
body[dir="rtl"] .box {
border-radius: 48px 0 0 48px; /* switched from left to right */
}
</style>
<![endif]-->
Im IE10 ist der Bug bis zum Build 8250 auch noch nachzuvollziehen.
Den Bug hat Andrea Herzog-Kienast entdeckt und ich kann das Verhalten leider nur bestätigen.
Hm, oftmals wird ja bei einer Arabischen Seite nicht nur die Laufrichtung des Texts umgestellt, sondern das Layout als gesamtes. Und dann, aber nur dann, macht es vielleicht Sinn?
Das denkt sich der IE9 so, aber er macht es nicht “richtig” oder alle anderen Browser machen es falsch…
Cool. Spiegelt der IE auch die HIntergrundgrafiken?
Natürlich nicht. Da kommen sonst vielleicht ganz komische Sachen raus.
yes that’s happened to me once
Ganz tolle Sache, da werd ich gleich mal versuchen was zu basteln. Herzlichsten Dank ..!