html em parsing bug in chrome

Question

THe code is here as well: http://jsfiddle.net/wMfMT/5/

This simple block of html:

<div>
    <em><em><em><em><a href="#">fifth</a></em></em></em></em>
    <em><em><em><a href="#">fourth</a></em></em></em>
    <em><em><a href="#">third</a></em></em>
    <em><a href="#">second</a></em>
    <a href="#">first</a>
</div>

and this css:

em {font-size:1.2em}

renders correctly on Firefox (every word is different size), but incorrectly on Chrome (fifth and fourth are the same size). First I thought it's a css issue, but then I inspected the html and it turned out that Chrome rendered it like the following:

<div>
    <em>
        <em>
            <em>
                <em>
                    <a href="#">fifth</a>
                </em>
            </em>
        </em>
<!-- /em missing -->
        <em>
            <em>
                <em>
                    <a href="#">fourth</a>
                </em>
            </em>
        </em>
        <em>
            <em>
                <a href="#">third</a>
            </em>
        </em>
        <em>
            <a href="#">second</a>
        </em>
        <a href="#">first</a>
    </em><!-- this is the lost /em -->
</div>

My questions are:

1. is my html correct (is it OK according to the standard to nest em-s?)
2. if yes then is there a workaround? *
3. is this a known bug and if not where should I report it?

*) I have this code in a WordPress plugin, and many people customized it by adding their own css, so changing from em to span or anything else would brake their sites. I'm looking for a workaround without the need to change the css

Added bugreport at: http://code.google.com/p/chromium/issues/detail?id=126096

Answer 1

Your HTML seems to be correct and I can reproduce it on Chrome Canary build.

A workaround would be to use spans: http://jsfiddle.net/PeeHaa/tCPd8/

I don't know whether it is a known problem, but you can check out the buglist at http://code.google.com/p/chromium/issues/list

If you also have Safari running you could also test that browser to see whether it is a Webkit or a Chrome bug.

UPDATE

*) I have this code in a WordPress plugin, and many people customized it by adding their own css, so changing from em to span or anything else would brake their sites. I'm looking for a workaround without the need to change the css

I don't see any possibility since the browser simply renders it wrong, so you cannot use it. The only hack I see is using javascript to replace the highest level em with a span with the same styling attached to it.

UPDATE2

As James Allardice has noted you could wrap the stuff in a span to fix the issue if that is ok for your plugin.