4

2 つのテーブルの行の高さを同期するにはどうすればよいですか? ここに JSFiddle がありますhttp://jsfiddle.net/2B8sy/ Firefox では問題なく動作しますが、Chrome や IE では動作しません。

.height()問題は、セルの jQueryを別のセルに渡す.height()と、Chrome と IE でセルの高さが等しくならないことですが、Firefox では問題なく動作します。

Fiddle でわかるように、最初の行は常に 2 ピクセル短すぎます。すべての行に発生します。これは Chrome と IE10 用です。Firefoxではすべて問題ありません。

なぜelement.height(otherElement.height());それらを同じ高さにしないのですか？例: http://jsfiddle.net/2B8sy/

window.getComputedStyle も試しましたが、同じ結果が得られました。

4

1 に答える 1

4

I've cracked this in Chrome. http://jsfiddle.net/2B8sy/5/

The issue was with the measuring of the td height. I've updated the CSS for the td as below:

table td {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This extra code tells the browser to include padding and margins inside the height and width measurements, so you don't get discrepancies when working with these elements.

I suspect Chrome and the other failing browsers were not consistent in their read and set of this property.

于 2013-07-05T12:38:03.843 に答える