Bugsおよびソリューションのリスト(次のインスタンスのデフォルトの実行環境はStandard modeです):

IE 6以降のブラウザで小さな高さのコンテナを定義するにはどうすればいいですか?

方法:

#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

IE 6以降のブラウザで高さの小さいコンテナを直接定義できないのは、デフォルトで行の高さがあるためです.

IE 6以降のブラウザフローティング時に2倍のマージンを生成するBUGをどのように解決しますか?

方法:

#test{display:inline;}

IE 6以降のブラウザで浮動が発生した後にmargin値が2倍に解析された場合、その要素のdisplay属性をinlineに設定すればよい.

IE 6以降のブラウザでmin-height効果をシミュレートするにはどうすればいいですか?

方法:

#test{min-height:100px;_height:100px;}

注意この場合#testはoverflowの値をhiddenに設定できません.そうしないと、シミュレーションmin-height効果は無効になります.

ボタンがIE 7以降のブラウザでvalueが増えるにつれて両側に白を残す問題をどのように解決しますか?

方法:

input,button{overflow:visible;}

IE 7以降のブラウザでliに2つ以上のフローティングが発生した場合、li間に発生する空白のギャップのBUGをどのように解決しますか?

方法:

li{vertical-align:top;}

top値に加えて、text-top|middle|bottom|text-bottomに設定することもできます.特定の和値でも構いません.

IE 6およびそれ以前のブラウザの下の3画素BUGをどのように解決しますか?

方法:

.a{color:#f00;}
.main{width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
.aside{height:100px;background:#aaa;}


	
content
	
aside

IE 6以降のブラウザでは.content設定margin-right:-3 px;設定も可能である.asideはフローティング

どのようにIE 6の下のテキストオーバーフローBUG(江湖匪号:“スパイが重い”あるいは“1匹の豚のストーリ”)を解決しますか?

BUG再現:

.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}


	

	
	
↓          

IE 6がフィルタPNGピクチャを使用して透明になった後、コンテナ内のリンクが無効になる問題をどのように解決しますか?

方法：

div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}

解決策は,コンテナ内のリンクに相対位置決め属性positionの値をrelativeと定義することである.

IE 6が偽オブジェクトを認識できない:first-letter/:first-lineの問題をどのように解決しますか?

方法1:

p:first-letter {float:left;font-size:40px;font-weight:bold;}
p:first-line {color:#090;}

スペースを追加:ダミーオブジェクト選択子:first-letter/:first-lineとルールを含むカッコ'{"の間にスペースを追加します.
方法2:

p:first-letter
{float:left;font-size:40px;font-weight:bold;}
p:first-line
{color:#090;}

改行:かっこ'{'ルール領域全体を改行します.詳細は、E:first-letterおよびE:first-lineセレクタを参照してください.

どのようにIE 8を解決して偽のオブジェクトを無視します:first-letter/:first-lineの中の!importantルールの問題?

BUG再現:

p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

上記のコードでは、IE 8でcolor定義が無効になります.なぜなら、colorが使用されているからです.importantルール.これに鑑みて、できるだけ:first-letter/:first-lineで使用しないでください!importantルール.

どのようにIE 6を解決して同じスタイルの体内を無視することができます!importantルールの問題?

BUG再現:

div{color:#f00!important;color:#000;}

上記コード、IE 6および以下のブラウザdivのテキスト色は#000です!importantは後ろのルールをカバーしていません.つまり!importantは無視されました.解決策は、このスタイルを2つに分割することです.詳細は、を参照してください.importantルール

IE 6以降のブラウザでli内部要素がdisplay:blockのインライン要素を定義した場合、下部に空白が発生する問題をどのように解決しますか?

BUG再現:

a,span{display:block;background:#ddd;}


	
CSSリファレンスマニュアル
	
CSS  の 
	
Webフロントエンドラボ
	
  li        display:block            

上記のコードでは、IE 6以降のブラウザのli内部のインライン要素の下部に空白が発生します.解決策はli内部のインライン要素にzoom:1を加えることです

IE 6以降のブラウザで幅が定義されていないフローティングまたは絶対位置決め要素がzoom:1が内部に設定されているブロック要素によってサポートされる問題を解決するにはどうすればいいですか?

BUG再現:

#test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}
#test h1{float:left;}
#test .nav{float:right;background:#aaa;}
#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}
#test .nav li{float:left;margin:0 5px;}


	
Doyoe
	

		

			
CSSリファレンスマニュアル
			
CSS  の 
			
Webフロントエンドラボ
		
	

上記のコードでは、IE 6以降のブラウザdiv.navにzoom:1のulが設定されます.
いくつかの解決方法を列挙します:ulをフローティング要素に設定します;ulをinline要素に設定します.ulのwidthを設定する

IE 7およびそれ以前のブラウザのサブエレメントが相対的に位置決めされたときの親エレメントoverflowプロパティのauto|hiddenが無効になる問題をどのように解決しますか?

BUG再現:

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}


	
        ，     overflow     auto|hidden   。       IE      ，        BUG
	
        ，     overflow     auto|hidden   。       IE      ，        BUG

上記のコードでは、IE 7以降のブラウザでdivのスクロールバーが動作しないことがわかります.解決策はdivにも相対位置決めposition:relativeを設定することです

Chromeがtransitionを適用するときにページが点滅する問題をどのように解決しますか?

方法:

-webkit-transform-style:preserve-3d; -webkit-backface-visibility:hidden;

Chromeでは、トランジション効果transitionを使用するとページが点滅することがあります

http://www.css88.com/book/css/experience/bugs.htm