5

代码也在这里：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

4

1 回答 1

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所指出的，如果您的插件可以的话，您可以将这些东西包装在一个跨度中以解决问题。

于 2012-05-03T12:26:40.403 回答