Question

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

我的问题是：

是我的html正确（根据标准可以嵌套 EM-S'）
如果是，则有解决方法吗？ *
这是一个已知的错误，如果不是，我应该在哪里报告？

*）我在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

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

<强> UPDATE2

正如James Allardice已经注意到，如果插件没问题，你可以将这些内容包装在一个范围内以解决问题。

html em解析chrome中的bug

1 个答案: