2011-12-04 12 views
4

最近、Firefoxでうまく表示されているにもかかわらず、Chromeで自分のサイトが壊れていることに気付きました。私のページにHTMLとCSSを勉強した -CSS表の表示の相違点 - Chrome Vs Firefox

http://www.designlagoon.com/what-we-do/

のFirefoxよりもChromeで4つの青のタイトルの下に大きなギャップがある - 含むボックスの枠を壊しています。これは、私が使用しているテーブルレイアウトのパディング/マージンに関連しているようですが、修正するためには苦労しています。

table display firefox
table display chrome
broken container

誰もが、私はそれを本当に感謝し、問題を引き起こしている可能性がありますどのようにいくつかの光を当てることができれば!

+0

レイアウトのテーブルは罪ですが、これはあなたの問題に関連する*すべての*がない可能性があります(それはそのルートになる可能性は非常に高いですが)...あなたのマークアップの部分を表示できますか?あなたの "テーブル"に当てはまるCSS? – BoltClock

答えて

6

これは私が昨日掲示の質問に関連している:高さ150ピクセル+パディング15ピクセル(×2)とTD = 180ピクセル:Firefox: wrong interpretation of box model?

実は、それが正しく動作していますChromeの。

Firefoxはtdにパディングを追加するときに誤算を行います。

あなたのベストショットは、セル上のパディングを削除し、その内容に余白を追加することです。

+1

Operaは同じことをしているので、私はFirefoxが間違っているとは確信していません。私は* CSS 2.1仕様の微妙さと関係していると思います。 「CSS 2.1では、セルボックスの高さはコンテンツが必要とする最小の高さです。テーブルセルの「高さ」プロパティは行の高さに影響を与えることができます(上記を参照)。セルボックス。その意味は、セルボックスが行の高さになってしまい、FirefoxやOperaのようなパディングが発生しないということです。それとも、私はそれについてはわからないと認めます。 – Alohci

+0

@Alohciあなたが言及したCSSの仕様は要素のパディングをカバーしていません。 ChromeとFirefoxの両方の高さを表のセルに指定すると、行の高さだけが拡大されますが、セルの高さは内容に必要な高さに制限されます。 http://jsfiddle.net/8wDde/の表の20px、標準の行の高さは20pxです。ただし、パディングを表のセルに追加する場合は、このパディングを高さセット(コンテンツボックスのサイジングではなくボーダーボックスのサイジング)に追加して、行の高さを拡張する必要があります。報告されているバグです:http://tinyurl.com/clde2yh – ptriek

+0

http://jsfiddle.net/Ez7xz/を見てください。私が言うことは、パディングがコンテンツに追加されているということです。 。コンテンツの高さとパディングの合計が行の高さを超える場合にのみ、行の高さを反映するようにセルの高さが変更されます。 Firebugで報告された計算された高さは、コンテンツボックスのサイジングがあると仮定しているかのように、セルの高さからパディングを差し引いたものですが、実際にはそうではありません(境界ボックスでもなく)これはおそらく6年後に修正されていないバグであると考えられます。 – Alohci

3

アドバイスをいただきありがとうございます。私はテーブルからパディングを取り除き、代わりに段落に適用しようとしました。これはある程度問題を改善しましたが、私たちはまだFirefox、IE、Chromeで異なる境界線を残していました。

最後に、テーブルを完全に削除し、代わりに4つの浮動25%列を使用することにしました。私は将来どのサイトレイアウトでもテーブルを使用しないでください。学んだ教訓!

関連する問題