Search code examples
htmlcssinternet-explorerinternet-explorer-9

Strange bug on IE9: <ul> and rtl

First, sorry about my bad english.

I came across in a very strange bug, It happens only in Internet Explorer 9.

here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <style type="text/css">
            html {
                direction: rtl;
            }

            ul li {
                list-style-image: url(v.gif);
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>I</li>
            <li>hate</li>
            <li>IE 9</li>
        </ul>
    </body>
    </html>

Here is the result:

IE 9 bug

Look at the direction of the image with the V!

You can see the bug in my site: www.usf.co.il

BTW: It only happens with "direction: rtl".

Someone know this bug? How can I fix it?

Solution

  • It is a strange phenomenon indeed, and it can be classified as a bug, since nothing in CSS specifications suggests such mirroring of images.

    The phenomenon seems to occur only on IE 9 in “standards mode”, not in “Quirks Mode” or previous IE versions.

    The CSS 2.1 spec clause on direction says: “This property specifies the base writing direction of blocks and the direction of embeddings and overrides (see 'unicode-bidi') for the Unicode bidirectional algorithm. In addition, it specifies such things as the direction of table column layout, the direction of horizontal overflow, the position of an incomplete last line in a block in case of 'text-align: justify'.”

    Although the formulation is somewhat loose, I don’t think you can read mirroring into it. The expression “direction of embeddings” relates to bidi embedding (LTR text inside RTL text or vice versa), not embedded content like images.

    Microsoft documentation of IE does not seem to contain any references to this feature.

    The feature is probably someone’s idea of supporting RTL writing much the same way as some characters are mirrored. It’s not a mad idea, but it’s harmful, since it’s not based on a specification and it deviates from browser practice.

    I’m afraid this is a difficult bug to circumvent. Using browser sniffing and serving a mirrored image to IE 9 (so that when it mirrors it, you get the right image) sounds awful, and you would also need a way to distinguish “standards mode.”