div+css のよくある間違い、互換性メソッドなど_html/css_WEB-ITnose

よくある間違い

1. HTML要素にスペルミスがないか、終了タグを忘れていないか確認してください

ベテランでもdivの入れ子関係を間違えることはよくあります。 Dreamweaver の検証機能を使用して、エラーをチェックできます。

2. CSSが正しいか確認してください

スペルミスがないか、語尾の｝を忘れていないかなどを確認してください。 CleanCSS を使用して、CSS のスペル ミスをチェックできます。 CleanCSS は CSS の軽量化を図るツールですが、スペルミスをチェックすることもできます。

3. エラーが発生した場所を特定します

エラーがレイアウト全体に影響を及ぼす場合は、div ブロックを削除して表示が通常に戻るまで、div ブロックを 1 つずつ削除すると、エラーが発生した場所を特定できます。エラーが発生しました。

4. border 属性を使用して、エラー要素のレイアウト特性を決定します

レイアウトに float 属性を使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。

5. float要素の親要素にclear属性を指定することはできません

MacIE上でfloat要素の親要素にclear属性を使用すると、周囲のfloat要素のレイアウトが乱れてしまいます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。

6. Float 要素は width 属性を指定する必要があります

幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。

また、要素を指定するときは、単位として px ではなく em を使用するようにしてください。

7. Float要素ではmarginやpaddingなどの属性を指定することはできません

IEではmarginやpaddingを指定してfloat要素を表示する際にバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。

8. float 要素の幅の合計は 100% 未満でなければなりません

float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。

9. デフォルトのスタイルをリセットしましたか?

マージン、パディングなどの特定の属性の解釈はブラウザごとに異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルをなしに設定することが最善です。

10. DTD を書き忘れていませんか?

いくら調整してもブラウザごとに表示結果が異なる場合は、DTD の先頭に次の行を書き忘れていないか確認できます。ページ:

/p>一般的に使用されるツール

1.Notepad.exe メモ帳、(小さなプログラム、いつでも手動編集、ジャンク コードが少ない) 、ビジュアルプレビューなし）

2.Dreamweaver（古いブランドのWebページ編集ツール、フル機能の比較的大きなプログラム）

3..editplus（コード編集用のカラープロンプトを備えたメモ帳ツールのアップグレードバージョンである必要があります） )

4. Notepad++ (非常にユニークなエディタ、オープンソース ソフトウェア、複数の開発言語をサポート)

5. Ultraedit (強力なテキスト エディタのセット)

6. Golive (将来 Dreamweaver に代わる製品)

7. Topstyle (非常に多くの機能、CSS コードチェック機能を備え、記述エラーの可能性を減らします。特に、ヘルプ ファイル内の CSS 命令の詳細な紹介は、参考資料として使用したり、専門知識のある人々の学習に非常に適しています。 CSS初心者)

互換性メソッド

IE6とFFの違い:background:orange; *background:blue;

IE6とIE7の違い:background:green !payment:blue;

IE7とFFの違い:background :orange; *background:green;

FF、IE7、IE6の違い：background:orange ;*background:green ! important;*background:blue;

IE7、IE8互換：

HEAD

1 . CSS のいくつかのブラウザは、ブラウザの互換性のために繰り返し定義できる異なるキーワードをサポートしています! important FireFox および IE7 で認識できます* IE6、IE7で認識可能_ IE6で認識可能*+ IE7で認識可能

2. IE固有の条件付きコメント rel="stylesheet" type="text/css" href="ie. css" />

3. いくつかのブラウザによる実際のピクセルの解釈 IE/Opera: 実際の幅オブジェクトの = (margin-left) + width + (margin-right) Firefox/Mozilla: オブジェクトの実際の幅 = (margin-left) + (border-left-width) + (padding-left) + width + (padding -right) + (border-right-width) + (margin-right)

4. マウスジェスチャの問題: FireFox のカーソル属性はハンドをサポートしていませんが、ポインタをサポートしており、IE は両方をサポートしているため、互換性のためにポインタが使用されます

5. FireFox で HTML タグの Style 属性を設定する場合、すべての位置が、幅と高さ サイズの値の後に px を付ける必要があります。IE もこの記述方法をサポートしているため、px 単位が一律に追加されます。 Obj.Style.Height = imgObj.Style.Height + 'px';

6. FireFox は、padding 5px 4px 3px 1px などの短縮されたパディング属性設定を解析できません。padding-top:5px; に変更する必要があります。

7. ul や ol などのリストのインデントを削除する場合は、 list-style:none;margin:0px と記述します。 ;padding:0px; ここで、margin 属性は IE で有効、padding 属性は FireFox で有効です

8. CSS コントロール透明度: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); : opacity:0.6;

9. CSS コントロール 角丸: IE: 角丸はサポートされていません: -moz-border-radius:4px または -moz-border- radius-topright:4px; -moz-border-radius -bottomleft:4px; -moz-border-radius-bottomright:4px;

10. CSS 二重線バンプボーダー: IE: border:2px outset; -ボーダートップカラー: #d4d0c8 ホワイト; -moz -ボーダー左カラー: #d4d0c8 ホワイト; -moz-ボーダー右カラー:#404040 #808080; 808080;

11. IE は CSS メソッド Cursor:url () をサポートしています。カーソル スタイル ファイルとスクロール バーの色のスタイルをカスタマイズします。FireFox は上記 2 つをサポートしていません

12. IE には Select コントロールが常に最前面に表示されるバグがあります。 、すべての CSS は Select コントロールでは機能しません

13. IE は、画像やテキスト コンテンツを含むフォームのラベル タグをサポートします。画像をクリックしても、ラジオまたはチェックボックスのラベルが表示されません。エフェクトをかけるには

14. FireFox の TextArea は onScroll イベントをサポートしていません

15. FireFox はインライン表示とブロックをサポートしていません

16. FireFox が Div に対して margin-left と margin-right を auto に設定すると、すでに中央揃えになっていますが、IEでは動作しません

17. FireFoxがBodyにtext-alignを設定するとき、Divはmarginを設定する必要があります：auto（主にmargin-left margin-right）を中央揃えにすることができます

18. するのがベストです。ハイパーリンクの CSS スタイル設定の順序は、L-V-H-A に従います。つまり、

19. IE で長い段落の自動行折り返しを設定するには、FireFox で CSS で word-wrap:break-word を設定し、JS 挿入メソッドを使用します。これを実現するための具体的なコードは次のとおりです:

を追加します。実際のマージンの2倍にする 解決策：display:inline

を追加する

22. IE6では画像の下に隙間ができてしまいます 解決策：imgにdisplay:blockを追加するか、vertical-align属性をvertical-align:topbottomに設定します。 |middle |text-bottom

23. IE6 での 2 つのレイヤー間のギャップの解決策: 右の div も float:left にするか、IE6 を基準にして margin-right:-3px を定義する

24. 表示方法LI のコンテンツが長さを超えた後の省略記号 (IE にのみ適用可能)

25. テキストを垂直方向に中央揃えに設定します。 /css"> ="text/css">

29. IE6 では、デフォルトの行の高さのせいで、コンテナを 1px 程度で定義できません。 CSS : overflow: hidden | line-height:1px

30. 透明属性を Flash に設定すると、Flash の上にレイヤーが表示されます