html em解析chrome中的bug

Question

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

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

这个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 错误。

更新

*）我在 WordPress 插件中有这段代码，许多人通过添加自己的 css 来定制它，因此从 em 更改为 span 或其他任何内容都会破坏他们的网站。我正在寻找一种不需要更改 css 的解决方法

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

更新2

正如James Allardice所指出的，如果您的插件可以的话，您可以将这些内容包装在一个跨度中来解决问题。