web-dev-qa-db-ja.com

HTML5テーブルのセルパディング-ブラウザによって異なります

私はこれをかなり単純な例に分解しました。

私にとっては、Chrome 7.0とFirefox3.6.12の場合とは異なって見えます。IE 9ベータ版はChromeのように見えます。

TDにパディングを設定し、すべてのブラウザーで同じ高さでレンダリングできるようにしたいと思います。現在、10pxの上部パディングを使用すると、ChromeのセルはFirefoxよりも高く見えます。

エリックのリセットCSSを使用してみましたが、結果は変わりません。なぜこれらが異なってレンダリングされるのか考えてみてください。

それがどのように見えるかの例はここにあります-http：// yfrog。 com/5zqa7p

そしてコード...

<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>
csshtmlhtml-tablecross-browserpadding
18
kolcun

FirefoxとChrome HTML5のテーブルセルのパディングを処理する方法に明らかにバグがあります： http://code.google.com/p/chromium/issues/detail?id = 506

マークアップとCSSを0のパディングで試してみると、同じです。 DOCTYPEをHTML5以外に切り替えると、それらも同じになります。

15
Robusto

HTML5の場合、行の高さがデフォルトの場合、一部のブラウザは画像付きのテーブルセルに2pxを追加します。バグとしてフラグが付けられています。常にこのようになるとは限りません。

table { line-height: 0; }
9
羅怒奈折馬

実際、この動作は、TD要素のbox-sizing値のデフォルトが異なるために発生します。仕様を確認してください： http://www.w3.org/ TR/css3-ui /＃box-sizing

ボックスサイズ設定は、すべての主要なブラウザで幸運にもサポートされています。 http://caniuse.com/#search=box-sizing を参照してください。

ただし、ブラウザには問題があり、デフォルトのbox-sizing値を上書きできません。特に、TDを使用している場合、ブラウザ間での動作はほとんど予測できません。

このJSFiddleの例 では、ブラウザ間で最も安定した動作がDIV要素のborder-boxとcontent-boxで示されています。

したがって、高さが固定されている場合はパディングの使用を避け、代わりにTDコンテンツを追加のパディングコンテナでラップして、簡単で防弾の回避策を作成してください。

お役に立てれば！

3
gkond
td { padding: 10px 0 0 0; }

これは言う：padding-top: 10px;、10pxを0に置き換え、うまくいけば同じになります。これは、FirefoxとIE9がパディングを考慮していないことを意味します。 （おもう）

2
Kyle

Firefox用のブラウザ固有のCSS（ ここから ）は次のように少し説明的であることがわかりました。

background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;

ですから、Firefoxの場合、パディングはかなり簡潔に説明できると思います（padding:10px 0 0 0;）：

padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

これはFirefox専用のソリューションです（またはソリューションになる可能性があります）。他のブラウザで具体的にデバッグするために機能します。

1
Mayeenul Islam

このように書く必要がありますpadding: 0 10px 0 10px;そうでないと、ブラウザはディメンションを完全にサポートしません。

1
4michaelcoleman