ホームページ ウェブフロントエンド htmlチュートリアル DIV+CSS_html/css_WEB-ITnose を記述する際の一般的な問題のまとめ

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

Jun 24, 2016 pm 12:29 PM

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 が赤色を表示することになります。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

See all articles