5

私は今、ほぼ半日検索しました...しかし、指定された幅にパディングを追加しないIE8/FF3.6/Operaと比較して、chrome6/7が唯一のブラウザであるように見える理由を見つけることができませんでした表のセルの。

もちろん、table-layout:fixed を使用している場合、指定された px 幅に突然注意を払わなければならないため、これは非常に重要です。

最後に私の質問: Chrome の計算が異なる理由と、どのブラウザーが正しいか (標準準拠) を知っている人はいますか?

現時点では、私の唯一の解決策は、手動で幅にパディングを追加する chrome.css を使用した条件付きコメントです...震え...

(ところで: px 幅が適切な Web 開発ではないと言いたくなる人は誰でも... このページを静かに残してください)

追加: (返信に関して)
まず第一に、あなたの即時の返信に感謝します... 私はそれをできるだけ短くしようとしていました、そしてそこで私は事実を最小限に減らしました... しかし、あなたが言及したように、ウェブ開発には多くの変数があるので、明確にしようとしています...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
    <style type="text/css">
        div { width:300px; }
        table { table-layout:fixed; width:100%; height:50px; }
        td.col1 { width:20px; background-color:blue; }
        td.col2 { width:40px; background-color:red; }
        td.col3 { width:60px; background-color:yellow; }
        td.col3 { width:auto; background-color:yellow; } 

        td { padding:5px; }
    </style>
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                <td class="col3"></td>
                <td class="col4"></td>
            </tr>
        </table>
    </div>
</body>

css行を切り替えると

td { padding:5px; }

さまざまなブラウザーで、chrome にはパディングが幅内に含まれているのに対し、他のブラウザーではパディングが追加されていることがわかります。

それが明確にするのに役立つことを願っており、前もって
バーニーに感謝します

4

5 に答える 5

3

同じ問題があり、残念ながら実際の解決策は見つかりませんでしたが、バグレポートと回避策の2つのスレッドが見つかりました。

スレッド：

  1. テーブルレイアウト：Safariでのレンダリングの違いを修正しました

  2. table-layout：fixedでセル幅を決定するときにパディングを考慮しないWebkitブラウザー

バグレポート：

https://bugs.webkit.org/show_bug.cgi?id=13339

考えられる解決策：2番目のスレッドを参照してください。

于 2011-06-19T13:03:02.260 に答える
2

問題を再現しようとしましたが、Chrome 7 と Firefox 3.6 では次のように見えます。

<!DOCTYPE html>
<style>
table { table-layout: fixed; border: 1px solid black; }
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; }
</style>
<table>
<tr><td></td><td></td></tr>
</table>

問題を解決するには、Doctype をまだ持っていない場合は、最初に追加することをお勧めします。doctype を使用すると、標準モードがトリガーされます。つまり、ブラウザー間で動作が一貫している可能性が高くなります。上記で使用して<!DOCTYPE html>いるのは HTML5 doctype ですが、実際にはほとんどすべてのブラウザーで標準モードをトリガーするように機能します。

標準モードが一貫性​​の向上に役立たない場合は、問題を最小限の例に減らしてみてください。問題を確認するのに十分なだけが残るまで、不要なものをすべて取り除きます。上記の例は、私がどれほど最小限のことを意味しているかを示しています。テーブルを簡単に表示し、ブラウザ間で比較できるようにするのに十分なマークアップとスタイル。最小限の例に縮小すると、自分で問題を確認できる場合があります。そうでない場合は、StackOverflow などのフォーラムに投稿して、より有用な回答を得ることができます。または、あなたが言及していた小さな問題を見つけるためだけに、ページ全体の HTML と CSS を調べてください。

于 2010-08-31T01:43:20.737 に答える
1

table-layoutの場合：CSSで修正：

td { width: 150px; padding: 5px; }

以下に結果を示します（左：Chrome、右：Firefox）：[stackoverflowでは画像を投稿できません。まだ]

クローム：5-140-5 Firefox：5-150-5

提案/回避策：tdレイヤーでパディングを使用しないようにしてください。div/span要素を使用してtd内でコンテンツをラップします。

span.column_wrap
{
    padding: 0 3px;
    display: block;
    line-height: 26px;
}

<td><span class="column_wrap">content here</span></td>
于 2011-09-20T08:40:04.953 に答える
0

このバグも発生した後、Chrome で、テーブル行 (テーブルのタイトルなど) の高さを 40 に追加し、テーブル全体に 5 つのパディングを追加すると、テーブル行の高さが 45 になることに気付きました。 Firefox では発生しません。

したがって、これを修正するために、CSS でその行の高さを設定し、0 のパディングを追加しました。

.title {
    height: 45px;
    padding: 0px; 
}

テーブル タイトルを含むテーブル行で、テーブルにパディングを追加します。これで、高さ 45 ピクセル + パディング 10 ピクセルで、タイトル行を (55 ではなく) 45 ピクセルのままにすることができます。

于 2012-09-30T10:40:02.160 に答える
0

その理由は、おそらく次の 2 つのいずれかです。

  1. テーブルと個々のセルの幅属性を設定しましたが、セルの合計幅がテーブルに割り当てた値と同じではありません。また
  2. セルの合計幅 (したがってテーブルの幅) は、それを含む要素 (div) の幅よりも大きくなります。この場合、Chrome はセル幅を再配分し、CSS とは異なるものにします。

マークアップを見て、最初に実際の値を td.col3 に設定するか、「auto」を削除して、何が起こるかを確認することをお勧めします。

于 2010-11-12T12:46:55.427 に答える