よくある間違い
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 の先頭に次の行を書き忘れていないか確認できます。ページ:
一般的に使用されるツール
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 に従います。つまり、 (IE にのみ適用可能)
25. テキストを垂直方向に中央揃えに設定します。 /css"> ="text/css">
29. IE6 では、デフォルトの行の高さのせいで、コンテナを 1px 程度で定義できません。 CSS : overflow: hidden | line-height:1px
30. 透明属性を Flash に設定すると、Flash の上にレイヤーが表示されます
