Chrome renders button links completely screwed up when placed inside a paragraph

I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors)开发者_StackOverflow社区. Here is some example markup:

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

This markup may look a litte strange to you, there's a few things you should know:

• I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and Chrome can render this tag for sure.
• Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image.

All of this is working fine in Firefox, and actually also in Chrome. The correct rendering can be seen in the following image:

It renders like that in both Firefox and Chrome. Here comes the problem, if I place such a button within paragraph tags > <p></p> this is what happens in Chrome only:

Notice how the button is ripped apart? Only in Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up.

Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question:

Edit: link to live page removed, was only temporary for problem inspection.

I believe that Chrome is automatically closing your <p> tag, because of the way chrome interprets the <figure> tag. If you look at the definition of the figure tag, you'll see it's supposed to be outside the flow of the content, and thus should not be contained within a paragraph. Try using a different item than figure, and I bet it will work.

You can read more about flow content here

As of Chrome 10, your site may be even more messed up.

In Chrome 9 (and Firefox 3.6 and Opera 11), <figure> has no margin. In Chrome 10, it has margin:1em 40px;

In Firefox 4 RC1, the margin looks similar, but I'm not sure if it's the same - Firebug Lite doesn't list the margin.