段落の中に置いたときにChromeがボタンリンクを完全に壊してしまう

Question

私はCSSにかなり堪能ですが、今はGoogle Chrome 9で非常に奇妙なレンダリングの問題に遭遇しています。スタイルアンカー）。ここではいくつかの例のマークアップは次のとおりです。

• 私はの一部としてアイコンを含めるようにHTML5の姿クラスを使用しています：

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

  このマークアップはあなたに奇妙なリッテて見える場合があり、あなたが知っておくべきことがいくつかありますボタン。適切なリセットCSSが適用されているため、Chromeはこのタグを確実にレンダリングできます。

• 実際に画像を指す代わりに、私はfigureクラスにCSSクラスを適用しています。 CSS内では、スプライト・テクニックを使用して、単一の大きなスプライト・イメージの正しい部分を表示しています。

これはFirefoxでも、実際にはChromeでもうまくいきます。正しいレンダリングは、次の画像で見ることができます：それは、FirefoxとChromeの両方でそのようにレンダリング

。私は段落タグ内などのボタンを配置する場合、ここでの問題は、これが唯一のChromeで何が起こるか<p></p>>、来る：ボタンが引き裂かれるか

お知らせ？クロールでのみ、段落の中に配置されている場合のみ。段落内の最初のボタンでのみ発生します。段落内に3つのボタンを配置すると、1番目のボタンのみが台無しになります。

あなたの最初の質問はおそらくCSSに関するものです。それはむしろ冗長なので、問題のページへの一時的なリンク：

編集：削除されたライブページへのリンクは、問題検査のための一時的なものでした。

Answer 1

クロムが<figure>タグを解釈する方法のため、クロムが自動的に<p>タグを閉じると思われます。 figure tagの定義を見ると、コンテンツの流れの外側にあるはずなので、段落に含めないでください。 Figure以外のアイテムを使ってみてください。うまくいくと思います。あなたはクローム10のようなフローコンテンツhere

Answer 2

についての詳細を読むことができます

、あなたのサイトはもっとめちゃめちゃにすることができます。

Chrome 9（およびFirefox 3.6およびOpera 11）では、<図>に余白がありません。 Chrome 10では、余白があります：1em 40px。

Firefox 4 RC1では、マージンは似ていますが、同じかどうかはわかりません.Firebug Liteには余白が表示されません。