Css 当放置在段落中时，Chrome会使按钮链接完全扭曲

我相当精通CSS，但现在我在Google Chrome 9中遇到了一个非常奇怪的渲染问题。我正在尝试创建一些外观奇特的链接按钮（基本上是重样式的锚）。以下是一些标记示例：

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

此标记对您来说可能有点奇怪，有几件事您应该知道：

• 我使用HTML5的figure类将图标作为按钮的一部分。我有适当的重置CSS应用和铬可以呈现这个标签肯定
• 我没有实际指向图像，而是将CSS类应用于figure元素。在CSS中，我使用精灵技术来显示单个大型精灵图像的正确部分

所有这些在Firefox和Chrome中都运行良好。在下图中可以看到正确的渲染：

它在Firefox和Chrome中都呈现出这样的效果。问题来了，如果我把这样一个按钮放在段落标签中，这只会在Chrome中发生：

注意到按钮是如何被撕开的吗？仅使用镀铬，并且仅当放置在段落内时。更奇怪的是：这只发生在段落内的第一个按钮上，如果我在段落内放置三个按钮，只有第一个按钮出错

您的第一个问题可能是关于CSS的。这是一个相当详细的链接，因此这里有一个临时链接到相关页面：

---

编辑：删除了指向live页面的链接，只是暂时用于检查问题。

我相信Chrome会自动关闭您的

标记，因为Chrome解释

标记的方式。如果你看一下的定义，你会发现它应该在内容流之外，因此不应该包含在段落中。尝试使用与figure不同的项目，我打赌它会起作用

---

您可以阅读更多关于流量内容的信息

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

在Chrome9（以及Firefox3.6和Opera11）中，没有边际利润。 在Chrome10中，它的余量为：1em 40px

---

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

你说得对，非常感谢。我发现更具语义的figure元素不能以这种方式使用有点遗憾，但事实证明，无论如何，我都是错误地使用了它；）