ホームページ > 記事 > ウェブフロントエンド > CSS ブラウザ互換性の問題セット
CSS とブラウザの互換性は、テクニックと原則を理解すれば、難しいことではないでしょう。IE7、6、Fireofx への移行方法をインターネットから集めて整理しました。 Web2.0 では、XHTML 形式でコードを記述してみてください。DOCTYPE は CSS 処理に影響します。W3C 標準として、
CSS スキル
1.p の垂直方向の中央揃えの問題
を追加する必要があります。
vertical-align:middle; 行間隔を p 全体と同じ高さに増やします。 line-height:200px; 次に、テキストを挿入すると、垂直方向の中央に配置されます。欠点は、改行なしでコンテンツを制御する必要があることです
2. マージンが2倍になる問題
p が float に設定されている場合、IE で設定されているマージンは 2 倍になります。これはie6に存在するバグです。解決策は、この p に display:inline; を追加することです。
例:
<#p id=”imfloat”>
対応するCSSは
です
#IamFloat{
フロート:左
margin:5px;/*IE では 10px として認識されます*/
display:inline;/*IE では 5px*/} として認識されます
3. float ie によって生成される 2 倍の距離
#box{ float:left; width:100px; margin:0 0 0 100px; //この場合、IE は 200px の距離を生成します。 //float を無視します。
block 要素と inline という 2 つの要素について詳しく説明します。 block 要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さ、およびマージンをすべて制御できることです (ブロック要素)。インライン要素の要素はそれであり、その他の要素は同じ行にあるため制御できません (埋め込み要素)。
#box{ display:block; //インライン要素をブロック要素としてシミュレートできる display:inline; //同じ行に配置する効果を実現
4 IE と幅と高さの問題
IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。通常のブラウザでは幅と高さだけを使用すると、幅と高さはまったく設定されません。 IEの下で。
たとえば、背景画像を設定する場合は、この幅がより重要になります。この問題を解決するには、次のようにします:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-height: 35px;}
5.
min-width は非常に便利な CSS コマンドで、要素の最小幅が特定の幅未満にならないように指定できるため、レイアウトが常に正しくなります。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、
を配置し、p にクラスを指定して、次のように CSS を設計します。
#container{ min-width: 600px; width:expression(document.body.clientWidth
最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用するため、HTML ドキュメントの形式が緩和されます。実際にはJavaScriptの判断により最小幅を実装しています。
6.p フローティング IE テキストにより 3 ピクセルのバグが発生します
左側のオブジェクトはフローティングされ、右側は外側のパッチの左マージンを使用して配置されます。右側のオブジェクト内のテキストは、左から 3 ピクセルの間隔で配置されます。
#box{ フロート:左; 幅:800ピクセル;}
#left{ フロート:左幅:50%;}
#right{ 幅:50%;}
*html #left{ margin-right:-3px; //この文が重要です}
以上がCSS ブラウザ互換性の問題セットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。