当放置在段落中时，Chrome渲染按钮链接完全搞砸了

Question

我非常精通CSS但现在我遇到了谷歌Chrome 9中一个非常奇怪的渲染问题。我正在尝试创建一些看上去很棒的链接按钮（基本上是风格很大的锚点）。以下是一些示例标记：

<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>

这个标记可能看起来很奇怪，你应该知道一些事情：

• 我正在使用HTML5的图形类将图标作为按钮的一部分。我已经应用了正确的重置CSS，Chrome可以肯定地呈现此标记。
• 我没有实际指向图像，而是将CSS类应用于图元素。在CSS中我使用spriting技术来显示单个大精灵图像的正确部分。

所有这些在Firefox中运行良好，实际上也在Chrome中运行。正确的渲染可以在下图中看到：

它在Firefox和Chrome中都呈现出类似的效果。如果我在段落标签中放置这样的按钮＆gt;就会出现问题。 <p></p>这只是在Chrome中发生的事情：

注意按钮是如何撕开的？仅在Chrome中，并且仅在放置在段落中时。它甚至更奇怪：这只发生在段落中的第一个按钮，如果我在一个段落中放置三个按钮，只有第一个被搞砸了。

你的第一个问题可能是CSS。它是相当冗长的，因此这是一个临时链接到相关页面：

编辑：删除了直播页面的链接，只是暂时进行问题检查。

Answer 1

我认为Chrome会自动关闭您的<p>代码，因为Chrome会解释<figure>代码。如果你看一下figure tag的定义，你会发现它应该在内容流之外，因此不应该包含在一个段落中。尝试使用与图不同的项目，我敢打赌它会起作用。

您可以阅读有关流内容here

的更多信息

Answer 2

从Chrome 10开始，您的网站可能会更加混乱。

在Chrome 9（以及Firefox 3.6和Opera 11）中，＆lt;图＆gt;没有保证金。 在Chrome 10中，它有保证金：1em 40px;

在Firefox 4 RC1中，边距看起来类似，但我不确定它是否相同 - Firebug Lite没有列出边距。