DIV+CSS_html/css_WEB-ITnose を記述する際の一般的な問題のまとめ

1. ul 属性と li 属性の問題

ul のデフォルトの内部および外部パッチ (margin、padding) が 0 ではありません。 li で左浮動属性 (float:left;) が使用されている場合、多くの場合、外部 div が拡張され、ページが変形します。また、IE6 では、最初の li のインデント値が小さくなり、最終的にレイアウトの問題が発生します。 div レイヤーが引き伸ばされない問題を解決するには、レイヤーの内側と外側のパッチを 0 (マージン: 0; パディング: 0;) に設定する必要があります。また、最初の li にインデント値がある問題を解決するには、 li をブロック表示 (display:inline;) として定義する必要があります

2. img 属性の問題

ここにはさまざまなブラウザの問題が関係しますが、ie6 は常に Web デザイナーにとって最も厄介な問題です。ページに img を挿入すると、IE6 で表示される画像の高さが常に正確な値より大きくなることがあります。これにより、以下の 2 ピクセルのエラーが発生します。解決策は、img の表示属性を定義することです。img{float:left; }

3 . オーバーフロー属性の問題

この属性が最も一般的に使用される場所はテキスト フィールド、登録プロトコルなどです。テキストは比較的大きいため、大きなページを占める必要はありません。ここでレイヤーの幅と高さの値を定義し、overflow:auto 属性を追加します。

4. Float 属性の問題

場合によっては、2 つ以上の div レイヤーが水平方向にフローティングされ、両方とも float:left; 属性を使用して、ページが水平方向にフローティングされます。表示は非常にわかりにくいため、注意しないとトラブルシューティングの段階で問題を見つけるのが困難になります。 float 属性を扱うときは注意してください。上記の問題を解決するには 2 つの方法があります。1 つ目は、これらのフローティング レイヤーの親レイヤーに clear:both 属性を定義することです。親要素の幅の値と等しいため、下のレイヤーは当然浮き上がりません。

5. 高さの値が均一ではありません

ie6では高さが1pxではなく1px以上になる場合があります。 1 つは div レイヤーのフォント サイズを直接 1px に設定する方法 (font-size:1px;)、2 つ目は div レイヤーの行の高さを設定する方法 (line-height:1px;) です。 , ただし、ここで注意していただきたいのは、ie6 ではこのレイヤーを空にすることはできず、スペース文字 ( ) を書き込むだけです。

6. CSS エンコードの問題

ページを作成するときに、多くの人は DW ソフトウェアを使用して HTML ページを作成することに慣れていますが、デフォルトのエンコード形式の設定を無視することが多く、最終的にページに文字化けが表示されます。 @charset "utf-8" このコード行に注意してください。UTF-8 と gb2312 は、文字化けを避けるために、これらに一致するエンコード形式を選択してください。

7. セレクタ(classとid)の選択について

ページ内でdivを複数回使用する場合はidを使用せずにclassを使用し、参照jsを使用する場合はスタイルを使用するのが最適です。 ID は js 用に予約されているため、プログラマが .net を使用してバックエンドを作成する場合、フロントエンド用に ID を使用しないことが最善です。

8. div レイヤーの高さの自動拡張の問題

div レイヤーの構造は、少なくとも 2 つ以上の div レイヤーを自動で定義した上で使用します。レイヤーの高さが超過しているため、ff が表示されます。ff の非互換性を解決する方法は非常に簡単で、overflow:hiiden; を追加するだけです。

9. よく使われる互換性属性の書き方の問題

ここでは具体例を列挙しませんが、長い記事を読むのは大変だと思いますので、よく使われる互換性属性を列挙します。柔軟に使いこなすために！属性を定義するときの書き込み順序は、最初に FireFox、次に IE8、IE7、最後に IE6 にすることをお勧めします。

①! important 属性は ff でのみ有効です。例えば、 width:200px! important;width:100px; の場合、ff の幅は 200px と表示されます

②「_」が付いた属性は、次のような ie6 でのみ有効です。 color:red; _color:blue; の場合、IE6 のフォントの色は青になります

③「+」が付いた属性は、上記のように記述されている IE7 でのみ有効です

④ff何も認識されませんが、上記の小さな記号がスタイルに追加されますこれは特定のブラウザを優先します。たとえば、CSS が color: yellow;+color:blue;_color:red; として定義されている場合、出力効果は ff が黄色、ie7 が青色、ie6 が赤色を表示することになります。