Chrome でまったく同じ属性を持つ 2 つの div が異なって表示される_html/css_WEB-ITnose

Chrome では、図に示すように、表の 3 番目の列で、テキストによって先頭が引き伸ばされて開きますが、その下のコンテンツは引き伸ばされません


2 つの div はまったく同じ属性を持ちますが、1 つはいいえ、ソース コード、いくつかの JS と HTML をアップロードしました
http://115.com/file/c2kpg3hs#test.rar

見てみるのにご協力ください
ありがとうございます。

ディスカッションへの返信（解決策）

rarファイルが開けません。 。手伝う。 。

すべて同じ幅に設定します

Oh rar ここからダウンロードしてください
http://115.com/file/c2kpg3hs

すべて同じ幅に設定します
上部と下部の TDS は、スタイリッシュに同じ高さを与えられます。どちらも 99px ですが、一方は引き伸ばされ、他方は引き伸ばされません

問題は table.js、table.el.css('width', '100%') の 501 行目にあります

テーブルを 100 に設定します% しかし、内部のテーブルはピクセルで設定されています

ダウンロードしてしばらく眺めてみましたが、なぜこれが起こるのかわかりませんが、最初のテーブルには 1 行のデータしかなく、2 番目のテーブルには複数のデータがあります。 1 番目と 2 番目の列は固定されており、適応型であることを意味します。 。

これらの理由が関係しているでしょうか? 。

しかし、実際には、投稿者は単に 2 つの DIV の一貫性を維持し、JS を使用して適応効果を制御したかったためにこの質問を提起したと思います。2 人用のテーブルを使用せず、最初のテーブルを使用することをお勧めします。行 ヘッダーです。 。ヘッダーがJSコードに書かれていることがわかるからです。 。

テーブルを使用すると、このような不一致を回避できます。 。ページをより良くすることができるので、プラグインを変更します。

問題は table.js, table.el.css('width', '100%'); の 501 行目にあります

テーブルは 100% に設定されていますが、内部のテーブルはピクセル単位で設定されています

100% 理解するには、各ブラウザが異なりますが、投稿者は、最初の列を例として、2 つの表の最初の列は 99 ピクセルで、コンテンツも同じであると述べました。第二形態は開くのか？それは 2 番目の表のデータの違いと関係があると思います。 。

5 階の dd0607 からの返信を引用します。
問題は table.js、table.el.css('width', '100%') の 501 行目にあります

テーブルは 100% に設定されていますが、内部のテーブル ただし、設定にはピクセルを使用します


これも可能だと思いますが、100% 理解するには、ブラウザごとに異なりますが、投稿者は、最初の列を例として、2 つの列のうちの最初の列についても言及しました。テーブルは同じで、99 ピクセルであり、コンテンツも同じです。なぜ 2 番目のテーブルを開くことができるのでしょうか。 2 番目のテーブルに従う方が良いと思います...

実行するとわかりますが、色ごとに 1 つずつ、2 つのテーブルで構成されています

Chrome で実行する場合は、F12 を押して要素内のコードを確認してください

2 つのテーブルを作成するのではなく、上部がグリッド ヘッダー、下部が各データ行であるため、2 つのテーブルが使用されます。テーブルを使用しない理由は、垂直スクロール バーがテーブルの内側に含まれる必要があるのに対し、テーブルの場合はスクロール バーが外側にあるためです
ただし、F12 を使用すると、属性が同じであることを確認できます。同じ幅を指定すると
IE と Firefox では正常ですが、Chrome だけが間違っています

問題は table.js、table.el.css('width', '100%'); の 501 行目にあります。テーブルは 100% に設定されていますが、内部のテーブルはピクセル単位で設定されています
ここでのテーブルは、両方とも固定幅である 2 つの内部テーブル要素ではなく、親コンテナの幅に適応する最も外側のグリッドを指します

5 階の dd0607 からの返信を引用します:

問題は table.js, table.el.css('width', '100%') の 501 行目にあります

テーブルは 100% に設定されていますが、内部のテーブルはピクセル単位で設定されます

ここでのテーブルは、2 つの内部テーブル要素ではなく、親コンテナの幅に適応する最も外側のグリッドを指します。2 つの内部テーブル要素は両方とも固定幅です

。実行後にコードを見ればわかります。または、その行をブロックして再試行することもできます

ダウンロードするのが面倒です。今後は、作成者がここにコードを直接送信することをお勧めします

table.js、table.el.css('width', '100%') の 501 行目

この行をコメントアウトして、 3 番目の列 幅を 10 に変更しますが、問題はまだ発生します
test.js の 10 行目の 3 番目の列の幅を変更します。 width:50 //10 に変更します

言いたいことはわかると思います。もう一度見てください

fit.fit();

Fit がテーブルに値を代入するときにこのセクションを確認してください

値を代入した後、上のテーブルと下のテーブルのステータスが同じになります

理由が判明、動的に変更される問題ドラッグするときの幅、本文の部分は最初に親要素を変更してから子要素を変更します。Chrome では問題が発生します:
syncHeaderWidth : function () {
var w = this.getTotalWidth();
this.head.parent().parent().parent().width(this.head.parent().width(w); el.width());
},

理由が見つかりました、ドラッグ時に幅を動的に変更するときの問題、ボディ部分は最初に親要素を変更し、次に子要素を変更することです、ヘッド部分は単に逆に、Chrome で問題が発生する場合は、順序を変更すれば問題ありません。

syncHeaderWidth: function () {
var w = this.getTotalWidth();
this.head.parent().width(w);
this.head.parent().……

実は。なぜあなたが書いたコードは 2 つの似たような機能なのに、実装手順が異なるのでしょうか? これは自分でレビューする必要があります (笑)。一般的には、同じようなことを書く人が多いので、このような事態は起こりません。