html em 解析 chrome 中的错误

Question

代码也在这里:http://jsfiddle.net/wMfMT/5/

这个简单的 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>

和这个 CSS:

em {font-size:1.2em}

在 Firefox 上正确呈现(每个字的大小不同)，但在 Chrome 上呈现错误(第五和第四个字大小相同)。起初我认为这是一个 css 问题，但后来我检查了 html，结果发现 Chrome 将其呈现如下:

<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>

我的问题是:

1. 我的html是否正确(是否可以按照标准嵌套 em-s?)
2. 如果是，那么是否有解决方法？ *
3. 这是一个已知错误吗？如果不是，我应该在哪里报告它？

*) 我在 WordPress 插件中有这段代码，许多人通过添加自己的 css 对其进行了自定义，因此从 em 更改为 span 或其他任何内容都会破坏他们的网站。我正在寻找无需更改 css 的解决方法

在以下位置添加错误报告:http://code.google.com/p/chromium/issues/detail?id=126096

Answer 1

您的 HTML 似乎是正确的，我可以在 Chrome Canary 版本上重现它。

解决方法是使用跨度:http://jsfiddle.net/PeeHaa/tCPd8/

我不知道这是否是一个已知问题，但您可以在 http://code.google.com/p/chromium/issues/list 查看错误列表

如果您还运行了 Safari，您还可以测试该浏览器以查看它是 Webkit 还是 Chrome 错误。

更新

*) 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

我看不出任何可能性，因为浏览器只是将其呈现错误，因此您无法使用它。我看到的唯一 hack 是使用 javascript 将最高级别的 em 替换为附加了相同样式的 span。

更新 2

作为James Allardice已经注意到如果你的插件没问题的话，你可以将这些东西包装在一个 span 中来解决这个问题。