CSS Web ページレイアウトにおける IE と FF の互換性の問題の簡単な概要

著者：Eve Cole 更新時間：2009-06-06 18:42:24

CSS Web ページのレイアウトでは、IE と FF の間に多くの非互換性の問題が発生することがよくあります。一般的な可能性とその解決策をいくつか紹介します。

1. IE と Mozilla の間のレイアウトの違いを解決するには、! important を使用します。

! important は CSS1 で定義された構文です。その機能は、指定されたスタイルルールの適用優先度を高めることです。最も重要な点は、IE はこの構文をサポートしていませんが、他のブラウザーはサポートしていることです。したがって、これを使用して、IE やその他のブラウザーにさまざまなスタイルを定義できます。たとえば、次のようなスタイルを定義します。

ソースコードの例[www.downcodes.com]

.colortest{
境界線:20pxsolid#60A179!重要;
ボーダー:20pxsolid#00F;
パディング:30ピクセル;
幅:300ピクセル;
}

Mozilla で閲覧する場合は、! important の優先度を理解できるため、色 #60A179 が表示されますが、IE で閲覧する場合は、! important の優先度を理解できないため、色 #00F が表示されます。

2. ハイパーリンクにアクセスした際にホバースタイルが表示されない問題を解決しました。

CSS プロパティの順序を変更します。順序の標準は次のようになります。
a:リンク—a:訪問済み—a:ホバー—a:アクティブ

3. Liの内容が長さを超えた場合に省略記号で表示する方法

ソースコードの例[www.downcodes.com]

4. Margin と Padding は、寸法を定義するための略語です。

margin:3px - すべての辺が 3px であることを意味します。
margin:3px 5px - 上下の値が 3px、左右の値が 5px であることを意味します
margin:3px 5px 7px——上の値が 3、左右の値が 5、下の値が 7 であることを示します
margin: 3px 5px 7px 5px - 4 つの値は上、右、下、左を表します。

5. IEで透過PNGが正しく表示できない問題を解決 - ヘッダーにコードを追加

ソースコードの例[www.downcodes.com]

<スクリプト言語="javascript">
関数正しいPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = ドキュメント.イメージ[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "表示:インラインブロック;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;"
if (img.align == "right") imgStyle = "float:right;"
if (img.parentElement.href) imgStyle = "カーソル:ハンド;"
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=" " + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "フィルター:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload"、正しいPNG);
</script>

6. ul は Firefox と IE で異なる動作をします

(パディング:0; マージン:0; リストスタイル:内側;) を使用します。
または (padding:0; margin:0; list-style:none;) 互換性を実現するには

7. FirefoxとIEにおけるBOXモデルの解釈の2pxの違いの解決策

ソースコードの例[www.downcodes.com]

ディブ{
マージン:30px!重要;
マージン:28px;
}

これら 2 つのマージンの順序を逆にしてはいけないことに注意してください。上記によると、IE は ! important をサポートしていないため、IE では実際には次のように解釈されます。

ソースコードの例[www.downcodes.com]

ディブ{
マーリング:30ピクセル;
余白:28px
}

繰り返し定義がある場合は、最後の定義が実行されるため、単に margin:XXpx! important; と書くことはできません。

8. マージンのデフォルト効果

div 内のコンテンツは、IE ではデフォルトで中央揃えに配置され、FF ではデフォルトで左揃えに配置されます。 ff コンテンツを中央に配置するには、コード margin:auto; を追加します。

CSS Web ページ レイアウトにおける IE と FF の互換性の問題の簡単な概要

CSS Web ページレイアウトにおける IE と FF の互換性の問題の簡単な概要