CSS 互換性問題の包括的なリスト_html/css_WEB-ITnose

1. Chrome の最小フォント互換性。

問題の説明: ff と IE の最小フォントは 1px に設定できますが、中国語版 chorme の最小フォントは 12px で、12px より小さいフォントはすべて 12px で表示されます。
解決策: chorme は CSS3 をサポートしており、利用可能です。
font-size: 12px;
-webkit-transform :scale(0.84,0.84) ;
*font-size:10px;
を実行すると、コンテナ全体が縮小して位置がずれていることがわかります。余裕を持って解決してください

2、IE8 下の画像を表示すると余分な枠線が表示されますが、Chrome または Firefox では問題ありません。 問題の説明: Chrome、FireFox、IE10 以降では表示効果に問題はありませんが、IE8 では問題ありません。余分な青い境界線 (場合によっては黒) があります。
解決策: img の境界線スタイルを指定する必要があります: img{border-style:none;}

3. 画像の下の不可解な空白の問題

問題の説明: 画像の下部にあるギャップには、実際にはインライン要素のレイアウト モデルでは、画像のデフォルトの垂直方向の配置はベースラインであり、ベースラインの位置はフォントに関連しています。したがって、画像の下部のギャップが 2 ピクセルになる場合もあれば、4 ピクセル以上になる場合もあります。フォント サイズが異なると、このギャップのサイズも影響を受けるはずです。
解決策：imgにdisplay:blockまたはvertical-align:topまたはbottomを設定します。

3. IE8 で透明な画像を書き込む方法:

問題の説明: opacity= は CSS3 属性であり、ie8 ではサポートされていません
解決策: opacity:0.7;
filter:alpha(opacity=70); /* と互換性があります。 ie*/

4、IE6 および 7 は display:inline-block を認識しません

解決策は次のとおりです:
標準ブラウザーに display:inline-block を認識させます
ie6/7 に display:inline-block を認識させます。上記の display:inline-block ;次に、zoom:1; を通じて haslayout をトリガーし、inline 要素が IE の inline-block 要素と同じように動作するようにします。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
追加 *zoom:1; (ie6 および ie7 でのトリガー);
*display:inline( のみ認識される) ie6 および ie7 による);
注: display:inline-block; の後に追加する必要があります。

5. IE6 の二重マージンのバグ。

問題の説明: IE6 でフローティング コンテナーの margin-left または margin-right を定義すると、実際の効果は値の 2 倍になります。
解決策: フローティングコンテナーに display:inline を定義します。

6. IE6 では 2 つのレイヤー間にギャップがあります

条件: 浮動要素に隣接する非浮動要素が特定の高さまたは幅を指定していない場合、非浮動要素のコンテンツは浮動要素の境界 3 ピクセルのギャップ。このギャップは、非フロート要素に沿ってのみ発生します。非浮動要素が特定の幅または高さを指定する場合、非浮動要素と浮動要素の間に 3 ピクセルのギャップが生じます。
解決策: 最初のフローティング要素に margin-right:-3px;
を設定します。

7. IE6 では、複数のフローティング要素に HTML コメント ステートメントが散在している場合、フローティング要素の幅が 100% の場合、もう 1 つが表示されます。次の行に表示されます。前の行の最後の文字です。

解決策: すべての浮動要素に display:inline; を追加します。

8. IE6 では、高さ約 1 ピクセルのコンテナーを定義できません。

解決​​策: overflow:hidden;

9 のホバー ステータスが原因です。リンクエフェクトは使用できません。

問題の説明: a:hover img{width:300px} マウスをホバーしたときにリンクに含まれる画像の幅を変更したいのですが、このスタイルは IE6 では認識されず、IE7 と FF でのみ機能します。

10. リンクが機能しない
問題の説明: リンクに埋め込みボタンまたは input type="button" ボタンがあり、ie8 以下の ff chorme をクリックしても応答がありません

解決策: onclick=" を追加します。 javascript:ボタンの場所。href='***.html'"。このようにリンクを操作しても意味がありません

11. ブロックされたリンクが機能しません
問題の説明: ブロックされたリンクの中に絶対レイヤーがあり、その中に img が配置されています。 IE7 にはリンク効果がありません。FF Chrome では通常です。

12. overflow:hidden は、その下の絶対レイヤーposition:absolute に対して無効であり、absolute はドキュメント フローから分離されます。
解決策: Position:relative または Position:absolute を overflow:hidden に追加します。

13. IE でのスクロール バーの色の設定は FF chorme では無効です
html {

スクロールバー-フェイス-カラー:レッド;

スクロールバー-ハイライト-カラー:#fff;
スクロールバー-シャドウカラー:ブルー;
スクロールバー- 3dlight-color:blue;
スクロールバー矢印の色:green;
スクロールバートラックカラー:#fff;
スクロールバーダークシャドウカラー:red;
}

14、清除浮动的几种方式：
1.添加空元素且设置clear:both;缺点：这个方式添加了添加了无意义的标记
2.对父元素也进行浮动。缺点：与父元素同级的元素会受到影响。
3.为父元素设置overflow:hidden; 缺点：这会自动清理包含的任何浮动元素：
4.结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容：
对父元素添加clear类
.clear:after {
content:".";
　 height:0;
　 visibility:hidden;
display:block;
　 clear:both;
}
缺点：在IE6/7和更低版本中不起作用。
解决方法：
.clear {
zoom:1;
}

15、ff不识别background-position-y 或background-position-x;
解决办法：background-position:x y;两个都写；

5 //Ie6下，不识别最大宽高度和最小宽高度，意即min-width/height和 Max-width/height
解决方法：
(1)：.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}
（因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。）

15 //ie6 不支持 fixed

/*对于非IE6可以这样写*/
#top{
position:fixed;
bottom:0;
right:20px;
}

/*但是IE6是不支持fixed定位的，需要另外重写*/
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*使用hack使IE6实现该效果，但这个东东会闪烁，需要以下代码*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

/*使固定在顶部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*固定在底部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/*垂直居中*/
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}

17//ie6下z-index不起作用的 bug

1）首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有两个：
1、父标签position属性为relative；2、问题标签含有浮动(float)属性。
2）所有浏览器：父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

11.//高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容

解決策: CSS コード: .1{height:0px;overflow:hidden;} の上下に 2 つの空の div オブジェクトを追加するか、DIV に border 属性を追加します。

11.//FFのテキストはコンテナの高さを拡張できないのはなぜですか? 標準ブラウザでは高さの値が固定されているコンテナはIE6のように拡張されないので、高さを固定してしたいのです。開くにはどのような設定が必要ですか?方法は、高さを削除して min-height:200px; を設定することです。min-height を認識しない IE6 を処理するには、次のように定義します。 min-height:200px; }

CSSハック
cssハックとは、CSSと互換性があり、さまざまなブラウザで正しく表示される技術を指します
IE6、IE7、IE8/9で認識できます。 , ffは認識できません
_ IE6でのみ認識可能

*+ IE7でのみ認識/*テスト中のIE67でも認識*/