CSSの実践でよく起こる問題。 _html/css_WEB-ITnose

これらを記事として読んでも決して学ぶことはできません。むしろ、これらは Web サイトを作成するときに遭遇する問題でもあります。転載については出典をご参照ください。

Dream Chaser フロントエンド ブログ。

1. ロゴが h1 にコンテンツを追加し、text-index:-9999px を設定すると、内部の他のタグも配置されます。
解決策: コンテンツを追加したい場合は、画像の背景を使用します。

2. ボタンの高さの問題
ボタンは高さの計算に常に Quirks モードを使用します。 Quirks モードでは、標準モードのように境界線が要素の外側ではなく、要素の幅内で計算されるため、テキストとボタンの両方に境界線を設定すると、ボタンの高さが要素の幅よりも小さくなる現象が発生します。文章。したがって、テキスト ボックスはボタンの位置に揃える必要があり、ボタンの高さはテキストの高さよりも高くする必要があります。 (ボタンの高さには境界線の高さが含まれますが、テキスト ボックスのテキストには境界線の高さが含まれません。)

3. 不透明度の透明度の問題
親要素が不透明度を使用する場合、子要素も不透明度を使用します。子要素を透明にしたくない場合は、空の要素を作成し、親要素の代わりに空の要素に不透明度を設定します。背景画像と透明度の両方を追加する場合は、背景用と画像用の 2 つの要素を追加する必要があります。

4. IE7 では、入力が送信されると、境界線がある場合に黒い境界線が表示されます。解決策は、入力の外側にラベルのレイヤーを配置し、その外側のレイヤーに境界線を追加することです。

5. 下位バージョンの IE Pass アウトライン:0 のボタンをクリックすると点線が表示されます。

6. z-index問題
カバーできない問題がある場合は、カバーしたい要素に背景色を追加できます。

7. タグ内で img を使用すると高さが数ピクセル高くなる問題の解決策
これは主に img がインライン要素であり、その下端がデフォルトでベースラインに揃えられるためです。

8. 親要素が高く設定されていない場合、子要素が親要素に含まれていないことが判明した場合は、overflow:hidden で解決できます。

9. 問題が発生したら、できるだけ早くそれを解決する必要があります。コードを再利用したい場合は、その後のコードを考慮する必要があります。

10. CSS コードをモジュール化し、共通の要素を別のクラスに配置して簡単に分離します。

11. CSS には Colspan がなく、セルの結合は HTML で直接設定する必要があります。

12. フローティング要素の場合、親要素の高さは拡張されません。解決策: フロートをクリアします。