ホームページ ウェブフロントエンド 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

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

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

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

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

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

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

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

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

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

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles