ie7が認識しない場合!重要【レイアウト解決策】_体験交流-CSSチュートリアル-php.cn

ie7が認識しない場合!重要【レイアウト解決策】_体験交流

WBOY

リリース： 2016-05-16 12:09:21

オリジナル

1702 人が閲覧しました

IE7 が登場する前は、IE と FF のレイアウトの違いを解決するために ! important を使用していましたが、IE7 が登場すると、 ! important は IE7 では機能せず、IE7 の解釈方法が FF や IE6 の解釈方法と異なる場合がありました。今回は、新しい問題が発生しました。! important を使用すると、IE6 は解決できますが、IE7 では解決できません。このように、同じ Web ページでも、ブラウザによって表示される効果は異なります。これは一昨日の問題です。レイアウト中に、最初に効果を確認できます。http://www.zishu.cn/blogview.asp?logID=553

または、以下のコードを実行して同じ効果を確認します。

コードをコピーコードは次のとおりです:

zishu.cn test

本文{ font-size:12px; 行の高さ:1.8; font-family:Verdana、「宋体」、Arial、Sans; テキスト整列:中央; 背景:#FFF; 色:#666; マージン:50ピクセル; パディング:0; リストスタイル:なし; }
a:リンク、a:訪問済み{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;}
#zishu_test li{ float:left; 幅:14%;テキスト配置:中央; マージン:0 自動; list-style:none }
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; 幅:100ピクセル; 高さ:110ピクセル; 背景:#fff;表示:ブロック; パディングトップ:10px; margin:auto}
#zishu_test li img{ width:75px; 高さ:75ピクセル; 表示:ブロック; テキスト整列:中央; マージン:自動; 背景:#FFF; パディング:3px; border:1px solid #D8A18B;}
#zishu_test li span{display:none;}
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; 背景:#FA9000; 幅:100ピクセル; 色:#FFF; 位置:絶対; }
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; 幅:100ピクセル; 高さ:110ピクセル; 背景:#F5F5F5;表示:ブロック; padding-top:10px;}

64d / 47 hitspixu

24d / 35 hits秀才

66d / 87 hits透露

40d / 34 hitsリビッド

47d / 56 hits老孟

42d / 36hits小玉

63d / 67 hitspixu

この例では、
プログラムコード
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
の行を削除すると、 IE7 では違いがあります。

この問題を解決するために、http://www.blueidea.com/tech/site/2006/3626.asp の方法を調べました。プログラマとレイアウト担当者は同じ人ではないため、このメソッドは制御が困難です。

次のコードです。 >

コードをコピー

コードは次のとおりです。* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */ *+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/

これは IE6 および IE7 用のメソッドです。 ; 
 "*+html" は ie7 と ie5.01 で使用されます。ie7 と ie5.01 を区別する非常に簡単な方法があります。これは重要です。これは、別のシステムを形成するために重要です。 ie7のハック方法。 

例:

*+html div.IE7 {
width:200px;
width:100px;