14

テーブルに適用border-collapse: collapse;してセルの境界線を「融合」すると、Javascriptでテーブルセルの幅を決定する際に問題が発生し始めます。たとえば、次のページを見てください。http:
//game-point.net/misc/browserTests/scratchpads/jsTableWidth/
2つのテーブルがあり、1つは境界線が折りたたまれており、もう1つは境界線が折りたたまれていません。境界線が折りたたまれていない行をクリックすると、jQueryのinnerWidth関数とouterWidth関数が、期待どおりの結果を報告します（コンテンツの幅、コンテンツに境界線の幅を加えたもの、パディングはありません）。

ただし、境界線が折りたたまれているテーブルの行をクリックすると、特にclientWidthプロパティでブラウザの動作に一貫性がなくなります。Firefoxでは、はとclientWidth同じwidth()です。IEとChromeでは1ピクセル高く、Operaではと同じwidth()ですがOperawidth()は小さすぎます。実際、width()Firefoxを除いて、私がテストしたすべてのブラウザで1ピクセル小さすぎます。したがって、スクリーンショットを撮り、コンテンツが実際に80pxである場合、width()は79pxです（jQueryは計算されたCSS値から取得します）。どうしてこれなの？

実際のコンテンツの幅を取得したいのですが。width()Firefoxだけが境界線を折りたたんでそれを正しく行うので、私は使用できないようです。境界線が含まれているため、使用できませんouterWidth()（または、実際のコンテンツの幅より1pxだけ大きいため、境界線が1つだけである可能性があります）。clientWidthブラウザ間で値が一致しないため使用できません。どうすればよいですか。またwidth()、境界線が折りたたまれている場合、ほとんどのブラウザで1pxが短すぎるのはなぜですか。

4

2 に答える 2

8

折りたたまれた境界モデルでは、セルは単に「融合」されるだけでなく、隣接するセルによって共有されます。

たとえば、次のようなマークアップがあるとします。

<table style="border-collapse: collapse">
  <tr>
    <td style="border: 1px solid black; width: 100px">
    <td style="border: 1px solid black; width: 100px">
  </tr>
</table>

折りたたみ枠モデルでは、このテーブルの幅は 102px です。実際にはテーブルの外側にある 0.5 ピクセルの境界線、次に 0.5 ピクセルの境界線、次にセルの 100 ピクセル、次に境界線の 1 ピクセル、次にセルの 100 ピクセル、次に境界線の 0.5 ピクセル、そしてテーブルの外側の境界線の 0.5 ピクセルがあります。http://www.w3.org/TR/CSS21/tables.html#collapsing-bordersの画像を参照してください。

では、UA は最初のセルのさまざまな幅に対して何を返すべきでしょうか? 100pxでいいの？101px? 102px? 他の何か？コンテンツの幅と境界線の幅を単純に返すと 102px が返されますが、セルが占める実際のスペースはわずか 101px です...

さらに、jQuery がコンテンツの幅自体を計算している場合、ボーダーが折りたたまれたセルを何らかの形で特殊なケースにしないと、この問題にも遭遇する可能性があります。

もちろん、clientWidth の実際の仕様はなく、jQuery の width() などはなおさらです。これが、表示される結果がいたるところにある理由を説明しています。

何をすべきかというと、ボーダーで何が起こっているかを実際に正確に知っている場合は、おそらく getBoundingClientRect().width (ブラウザーがそれを台無しにしないと仮定) して、ボーダーの半分の幅を差し引く必要があります。これがさまざまな異なる境界線の幅で機能する必要がある場合、優れた解決策があるかどうかはわかりません.

于 2012-11-08T07:54:13.517 に答える
5

問題はすべてのブラウザにあると思いますが、Opera は実際には jQuery がそのwidth()機能で行っていることです。幅と高さのカスタムフックがあり、計算された真の幅を常に返すとは限りません。これらの表のセルの幅を取得するために使用window.getComputedStyleすると、実際に適切なレンダリング幅が得られます。window.getComputedStylejQuery をバイパスしても適切なレンダリング幅が得られないように見えるので、Opera の出力をバグとして報告します。

于 2012-11-09T08:27:03.660 に答える