css互換時の注意点_html/css_WEB-ITnose

1. IE ブラウザと Chrome ブラウザでは div のレイアウトが異なります。div 内に左、中央、右の 3 つの div をネストするのがよいでしょう。 IE8 以降ではほぼ同じですが、IE8 より下では、Chrome と Fierfox では内側の div がデフォルトで左の div の右側に表示されますが、IE8 ではそうではありません。この問題を解決するには、左の float を設定します。

2. ul ノートが左にフロートするように設定されている場合 (li>5 など)、ノートが水平に表示されるように設定されている場合、li は右にフロートするように設定されている場合に表示されます。右から左になります。たとえば、ナビゲーション バーでは、

ホームページの購入記録が左側にフローティングされています

購入記録のホームページについて これは右側にフローティングされています

3. たとえば、メモ

に 2 つの空白がある場合、 1 行内でスペースを使用することもできます。ただし、IE ブラウザの間隔は比較的大きいため、CSS を使用してインデントを調整しないことをお勧めします。 . text-indent: 2em; 空の 2 つのフォント フォント サイズがどんなに大きくても、最初の行が空であることを除いて、2 つのフォント間の距離は同じです。

4. 通常、2 つのモジュールの場合、左右のマージンを合わせて、上下のマージンが最大値になります。たとえば、左側のモジュールの margin-right が 10px、右側のモジュールの margin-left が 10px の場合、上のモジュールの margin-bottom が 10px、margin-top が 10px の場合、それらの間の距離は 20px になります。下のモジュールの距離が 20 ピクセルの場合、それらの間の距離は 20 ピクセルになります。モジュール間の距離は 20 ピクセルで、最大のものを選択します。 (内側のマージンをマイナスにすることはできず、外側のマージンをマイナスにすることもできます。) 各ブラウザのデフォルト値が異なるため、通常、すべての付箋紙の内マージンと外側マージンはクリアされます。互換性を容易にします。通常は CSS ファイルで定義されます *{padding=0px; margin=0px;}

5.

などのブロックレベルの要素は、デフォルトの幅が 100% であるため、セレクターを使用してデフォルト値を変更します。半分は、新しいブラウザでは放棄された align="center" なしで水平方向に中央揃えになり、半分は css、margin=any px、auto で制御され、水平方向に中央揃えになります。

6.Ie6 は display:inline-block をサポートしていないため、通常は使用されません。

7. 親 div は浮動子 div とオーバーフローを制御できません。この問題を解決するには、通常、親 div に overflow: hidden を追加します。 8. scr はインライン ブロック レベルであるためです。したがって、 margin: 0px, auto は使用できません (ブロックレベルの要素にのみ使用できます)。 中央に配置したい場合は、ブロックレベルの要素 diaplay: block; に変換します。相対位置指定と絶対位置指定

位置指定あり 属性のデフォルトのレベルは 0 です。 z-index レベルが定義されていない場合は、後のレベルが優先されます。

相対位置は通常、モジュールの現在の位置です。

絶対配置は、最も近い位置にある親を持つモジュールを基準にして配置されます。

(z-index は願いの壁を実現できます)

(z-index=-1 の場合、内部のものはクリックできません)

10. 表示: なし、場所は存在しません

可視性: 非表示、位置はまだ存在します

11.css2 は透明度を設定します: 0-1;

Ie はフィルターを使用します: alpha (opacity=0-100); 2 つを一緒に書くには

12.li {list-style-type:none;}li の下の小さなドットをキャンセルします。通常はナビゲーションに使用されます。 ·

13. IE ブラウザに背景画像を追加しても効果がない場合がありますが、Firefox と Google では正常に表示されます。png を jpg に変換してみてください。

14. 要約すると、CSS3 の機能は IE9 以降のブラウザでのみ使用できます。IE9 未満のブラウザが必要な場合は、CSS3 を諦めてください。そうでない場合は、コードを書くよりも互換性の調整に時間がかかります。人々はIE9以下のブラウザの使用を諦めているが、中国ではリン・ワンを無視するいたずらっ子の一部が未だにXPを使用しており、タオバオはIE8以下のブラウザの使用を放棄する準備を進めている。開発者に提案したいのは、Web ページを作成するときは責任を持って行う必要があることです。公式 Web ページの中には IE でしか開くことができず、前の Web ページを作成したばかりの人でも作成できます。私の意見では、このコードはプログラマーによって書かれたものではないようです。私は広州の公式図書館の公式ウェブサイトを閲覧しましたが、それを読んだ後、もう好きではなくなったと感じました。実際、互換性は経験に依存します。 Firefox デバッガーを使用して独自のレイアウトを確認します。IE でデフォルト値の半分を呼び出すには時間がかかります。div の位置が異なるだけで済みます。 float を設定するだけです。float が機能しない場合は、位置決めを使用して、ゆっくり考えてください。そうすれば、将来の開発で問題が発生したときにすぐに検出できます。上記はすべて、私が覚えている互換性方法です。書ききれていないものもたくさんあります。しかし、問題に遭遇したとき、私はそれを解決する方法を知っています。Baidu がその問題を解決できることを願っています。一般的なコードについては、Baidu は必要ありません。英語を理解するのが最善です。英語が話せない場合は、翻訳ツールをダウンロードすると便利です。