The code is also here: http://jsfiddle.net/wMfMT/5/
This simple html block:
<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}
Firefox displays correctly (each word has a different size), but incorrectly in Chrome (the fifth and fourth are the same size). At first I thought it was a css problem, but then I inspected the html and it turned out that Chrome did it like this:
<div>
<em>
<em>
<em>
<em>
<a href="#">fifth</a>
</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>
</em>
</div>
My questions:
- is my html correct (is this ok according to the standard for em-s socket?)
- if so, is there a workaround? *
- This is a known mistake, and if not, where should I report it?
*) I have this code in the WordPress plugin and many people tweaked it by adding their own css, so switching from em to space or something else slows down their sites. I am looking for a workaround without having to change css
bugreport : http://code.google.com/p/chromium/issues/detail?id=126096