IEブラウザの一般的な互換性の問題
-
互換性の問題
-
IEの画像境界の問題
-
写真はタグに配置されます
-
img { border:none }
-
-
IE8以下のブラウザで背景の複合属性を書き込む際の問題
-
.bg { background:url("./images/bg.jpg")no-repeat center }
-
//解决方案:在url和no-repeat 直接加上空格 .bg { background:url("./images/bg.jpg") no-repeat center }
-
-
その他のIEの低バージョンの互換性の問題
-
IE6以前のブラウザーで高さの小さいコンテナーを定義する
-
#test { overflow:hidden; height:1px; font-size:0; line-height:0; }
-
-
IE6以前のブラウザでは、フローティング時にダブルマージンのバグが発生します
-
解決策:ie6のラベルの表示属性をインラインに設定します
-
#test { float:left; _display:inline; }
-
-
IE7以前のブラウザーで、子タグが相互に相対的に配置されている場合に、親タグのオーバーフロー属性が自動的に無効化される問題。
-
解決策:親ラベルを基準にして、相対的な位置を設定します。
-
-
ブロックie7は、ブロック遷移の1行に表示されません
-
解決:
-
div { display:inline-block; *display:inline; *zoom:1; }
-
-
IE7以下のブラウザはフローティングの問題をクリアします
-
/* : 单冒号兼容性更好,不推荐用双冒号 :: */ .clearfix:after { content: ''; display: block; clear: both; } /* 兼容 ie7 及以下浏览器 清浮动问题 */ .clearfix { *zoom: 1; }
-
-
-
-
CSSハック
-
条件Hack
-
大なり記号:gt
-
以上:gte
-
未満:lt
-
以下:lte
-
<!--[if IE]> <p>只在IE中能看到这个段落</p> <![endif]--> //只有IE6以上,才能看到应用了test类的标签是红色文本 <!--[if gt IE 6]> <style> .test { color:red; } </style> <![endif]-->
-
IE10以降から条件付きコメントが削除されました。ご使用の際はご注意ください。
-
プロパティレベルのハック
-
_アンダースコア:IE6以下を選択します
-
*:IE7以下を選択してください
-
\ 0:上記を選択ie8
-
-
color:red;//所有浏览器可识别 _color:red;//仅IE6识别 *color:red;//IE6、IE7识别 color:red\0;//IE8、IE9识别
-
セレクターレベルのハック
-
* html .box { background:red; }//只有在IE6显示红色
-
* + html .box { background:red; }//只有在IE7显示红色
-
-