10

Web サイトでブラウザ間の一貫性を実現しようとしています。

このページについてです: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (この URL は作成しない方がよいことに注意してください) seo-bot でクロール可能)

このページを IE、Firefox、Opera で表示する場合は問題ありませんが、Chrome と Safari では表が少しずれています (おそらくはっきりとわかるはずです)。

問題に見えるのは？

Chrome と Safari では、合計で左右の境界線 (2px) が設定されたテーブル幅に追加されますが、他のブラウザーでは境界線は幅の一部と見なされます。

(最も) 関連する CSS 行は次のとおりです (ファイルからtable.css、ページのソース ファイルからも入手できます)。

table.uitbetaling {
 margin: 11px 18px 10px 19px;
 border: 1px solid #8ccaee;
 width: 498px;
 padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
 margin: 0;
 border: 0;
 padding: 0;
 width: 496px;
}
table.uitbetaling tr {
 margin: 0;
 border: 0;
 padding: 0 1px 0 0;
}

したがって、基本的には、次のようにテーブル構造を使用して画像を整理しました: (テーブルのクラスはuitbetaling)

<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>

table.uitbetalingここで、との幅をtable.uitbetaling img, table.uitbetaling td同じ値 (例: 両方496または498) に設定すると、Chrome と Safari の「問題」は解決されますが、Firefox では右側の境界線が空白になります。右側の境界線がもう「収まらない」ためです。Firefox で表示される右枠よりも少なくとも 2 ピクセル狭くする必要がありますimg。tdtable.uitbetaling

これを解決する方法はありますか？

4

7 に答える 7

6

境界線が要素の幅に追加されることに問題がある場合は、CSS スタイルを参照してください: box-sizing

border-box - ボーダーの幅/高さとパディングの幅/高さを含めるか、基本的に設定した幅にボーダー/パディングを含めます

content-box - 要素に設定した幅はコンテンツ領域のみです。これにはパディングやボーダーは含まれません

私が使用しない padding-box もありますが、通常は上記の 2 つで十分です。

時々、IE8 は Chrome/FF などとは異なるボックス サイズを使用していると思います。これが問題が発生する理由です。box-sizing の設定をいつでもデバッグして確認できます。

注: DOCTYPE がない場合は、互換モードになっています。IE は、box-sizing/box モデルの Chrome/FF とは大幅に異なります。これが問題です。

于 2012-05-22T16:44:29.483 に答える
0

Opera 11で確認しましたが、Google Chrome7.0.517.44とFireFox3.6.12ではサイトのデザインに違いは見られませんでした。

于 2010-11-22T11:55:41.687 に答える
0

常にtable{border-collapse:collapse;}cssに設定してから、とにかくhtmlで使用することcell-padding="0"をお勧めします。cell-spacing="0"

于 2010-12-03T17:29:03.253 に答える
0

コードを最も単純な要素に分割し、各ブラウザーでテストします。違いを見つけたら、さまざまなブラウザー検出方法を使用して、各インスタンスのコードを微妙に変更できます。そうは言っても...あなたが狂ったようになりたくないのであれば、CSSはそれをプログラミングで行うよりも、可能であればピクセルを手放してください.

于 2010-11-03T18:31:12.670 に答える
0

DTD (DOCTYPE) を宣言しましたか?

これを読む：

http://msdn.microsoft.com/en-us/library/bb250395.aspx

ブラウザーには境界線を表示するさまざまな方法があるようですが、DOCTYPE 宣言 (html ドキュメントの上部にある) により、少なくとも css ボックス モデルに関しては、実際の標準に準拠する必要があります。

注: 私は常に xhtml トランジショナル DTD を使用して、ドキュメントの互換性を可能な限り高めています...

幸運を！

于 2010-12-01T19:22:04.407 に答える
0

安全のために、私は通常、次の方法でテーブルを開きます。

<table cellspacing="0" cellpadding="0">

これは「古い」HTML ですが、少なくともブラウザーに沿った一貫性を強制し、必要に応じて CSS を適用します。

于 2010-11-04T19:03:45.740 に答える
0

試す：

table{border-collapse:collapse;}
于 2010-05-19T10:36:27.107 に答える