JavaScript でブラウザの問題を解決する方法まとめ [翻訳] ページ 1/4_javascript スキル

理由がわからない場合でも、心配しないで、CSS のルールを詳しく調べて、CSS を使用して何かを修正する: 20 の一般的なバグと修正この記事をご覧ください。

上記の記事がまったく役に立たない場合は、以下の 12 の JavaScript ソリューションのいずれかを使用して問題を解決し、すべてのブラウザーでページの見栄えを良くすることができます。

この記事では、 Web アプリケーション開発で遭遇する最も一般的な CSS 問題に対する 12 の JavaScript ソリューションを提供します。

他の CSS 関連記事にも興味があるかもしれません。

• CSS を使用して何でも行う: 50 のクリエイティブな例とチュートリアル

• CSS を使用して何でも修正する: 20 の一般的なバグと修正

1. 高さを揃える

レイアウト方法に基づいて、視覚的に同じ高さの列またはコンテンツ ブロックを作成することに挑戦します。

1.1 jQuery を使用して同じ高さを設定します

jQuery同じコンテナ内のすべてのボックス モデルの高さを等しく設定できるプラグインがあり、非常に単純なグリッドも作成できます。もちろん、使いやすさとパフォーマンスの観点から、追加のパフォーマンスのオーバーヘッドは最小限です。この関数は、同じコンテナ内のすべての兄弟ノード要素の高さを検出し、各要素の最小の高さを、その中で最も高い高さの値を持つ要素に設定します。 .

仕組み

equalHeights() は、指定された要素の最上位の子ノードをループし、その最小の高さの値を高さの値に設定します。

• デモを見る

1.2 jQuery を使用して等高線列を設定する

同じ高さを設定する別の jQuery プラグイン

$("#col1, #col2").equalizeCols();

上記のコードは、#col1、#col2 列の高さを等しく設定します

$("#col1, #col2").equalizeCols("p,p" );

上記のコードは、#col1 と #col2 の高さを同じに設定し、#col1 と #col2 の下の p 要素に追加のスペースを追加する要素を追加します。