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] 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 {
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 = " + " style=" " + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "フィルター:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload"、正しいPNG);
(パディング: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; を追加します。
