マルチブラウザの互換性の問題と CSS を使用した解決策の紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

マルチブラウザの互換性の問題と CSS を使用した解決策の紹介

高洛峰

Mar 14, 2017 pm 04:16 PM

互換性処理の重要なポイント
1. DOCTYPE は CSS 処理に影響します

2. FF: padding を設定すると、div は height と width を増加させますが、IE は増加しないため、! important を使用する必要があります。追加の高さと幅を設定します

3. FF: ! important をサポートしますが、IE は ! important を使用して FF のスタイルを特別に設定できます

4. div: vertical-align: middle; 行間隔を増やして DIV 全体を同じ高さ line-height:200px; にテキストを挿入すると、垂直方向の中央に配置されます。欠点は、コンテンツを行の折り返しなしで制御する必要があることです

5. mozilla Firefox と IE の BOX モデルに一貫性がないため、2 ピクセルの違いが生じます。解決策:

div{margin:30px! important;margin :28px;}

注: これら 2 つのマージンの順序は、IE では認識できませんが、他のブラウザでは認識できます。実際、IE では次のように解釈されます: div{maring:30px;margin:28px}

定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;

ブラウザの違い
1、ul、ol リストのインデントの問題

ul、ol およびその他のリストのインデントを削除する場合、スタイルは次のように記述する必要があります:
list-style
:none;margin:0px;padding:0px ; margin 属性は IE で有効であり、padding プロパティは FireFox で有効です。
[注] IE では、margin:0px を設定すると、リストの上下左右のインデント、空白、リスト番号やドットが削除されることが確認されています。パディングの設定は、スタイルには影響しません。 Firefox では、margin:0px を設定すると、上下のスペースを削除できます。padding:0px を設定すると、左右のインデントのみを削除できます。リストの番号またはドットを削除するには、list-style:none を設定する必要もあります。つまり、IE では最終的な効果を得るために margin:0px のみを設定できますが、Firefox では最終的な効果を得るために margin:0px、padding:0px、list-style:none を同時に設定する必要があります。

2. CSS の透明度の問題

IE: filter:progid:DXImageTrans
for
m.Microsoft.Alpha(style=0,opacity=60)。 FF：不透明度：0.6。【注意】両方書いて下に不透明度属性を入れるのがベストです。

3. CSS の角丸の問題

IE: IE7 より前のバージョンは角丸をサポートしていません。
FF: -moz-b
ord
er-radius:4px、または -moz-border-radius-top left:4px; -moz- border-radius-topright:4px; border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。 [注意] 角丸の問題は CSS の古典的な問題です。角丸を設定するには JQuery
フレームワークset を使用し、これらの複雑な問題については他の人に考えてもらうことをお勧めします。ただし、jQueryの角丸処理は領域全体の角丸処理のみに対応しており、枠線の角丸処理には対応していませんが、この枠線の角丸処理は、次の機会に紹介します。 4. カーソル:ハンド VS カーソル:ポインター

問題の説明: Firefox はハンドをサポートしていませんが、IE はポインターをサポートしています。どちらもハンド命令です。
解決策: ポインタを一律に使用します。

5. フォントサイズの定義の違い

フォントサイズの定義はFirefoxでは13px、IEでは16pxとかなり違います。

解決策: 14px などの指定されたフォントサイズを使用します。並べて配置された複数の要素(
画像
やリンク)のdivとdivの間、コード中のスペースや改行はFirefoxでは無視されますが、IEではデフォルトでスペース(約3px)として表示されます。

6. CSS 二重線バンプボーダーIE: border:2px outset
;。
FF: -moz-border-top-colors: #d4d0c8 ホワイト;-moz-border-left-colors: #d4d0c8 ホワイト;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-色:#404040 #808080;
ブラウザのバグ 1.IE で float に設定された div に設定されたマージンは 2 倍になります。これはie6に存在するバグです。

解決策: この div に display:inline; を追加します。例:

対応する CSS は
quote
の内容です。 :

#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
} 
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
}

CSSには問題が多すぎて、同じCSS定義でもページ規格が異なれば表示効果も異なります。開発に沿った提案としては、テーブルの使用を減らし、標準の XHTML 標準を使用してページを作成し、IE などの主流ブラウザを考慮して、CSS 定義をできる限り標準 DOM に基づいて行う必要があります。 FirefoxとOpera。多くの場合、FF と Opera の CSS 解釈標準は CSS 標準に近く、より規範的です。

2. IEセレクタースペースのバグ今日、ブログの段落スタイルの最初の文字スタイルを設定していたときに、スペースもスタイルを無効にする可能性があることに気づきました。次のコードを見てください:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body>

世界にとって、あなたは一人の人間ですが、誰かにとって、あなたはその人の世界のすべてです。たとえ悲しくても眉をひそめないでください、あなたの笑顔に誰が恋に落ちるかわからないからです。

）、p:first-letterと{font-size:300%}にスペースを追加、つまりp:first-letter {font-size:300%}にすると正常に表示されるようになります。しかし、同じコードは FireFox では正常に見えます。論理的には、 p:first-letter{font-size:300%} の書き方が正しいです。だから問題は何ですか？答えは、
疑似クラス
のハイフン「-」です。 IE にはバグがあり、疑似クラス名にハイフン「-」が含まれている場合、疑似クラス名の後にスペースを続ける必要があります。そうしないと、スタイル定義が無効になります。 FFではスペースがあってもなくても正常に処理できます。

以上がマルチブラウザの互換性の問題と CSS を使用した解決策の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。