CSS の互換性の問題といくつかの一般的な問題の概要_html/css

現在、主流のブラウザの互換性は比較的良好です。この記事では主に IE6 と 7 の非互換性の問題を解決することに焦点を当てます。

1.フローティングがある場合、計算は正確である必要があり、IE6 では、コンテンツの幅と高さが設定された幅と高さを超えないようにしてください。

解決策: 対応する親に overflow:hidden を追加します。ただし、一部の部分は非表示になりますので、設定する前に幅と高さを正確に計算することをお勧めします

例: (つまり、伸びます)

 1 <style>  2 .box{ width:400px;}  3 .left{ width:200px;height:300px;background:red;float:left;}  4 .right{ width:200px;float:right;}  5 .div{width:180px;height:180px;background:blue;padding:15px;}  6 /*  7  计算一定要精确 不要让内容的宽高超出我们设置的宽高  8  在IE6下，内容会撑开设置好的宽高  9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <div class="left"></div> 15 <div class="right"> 16 <div class="div"></div> 17 </div> 18 </div> 19 </body>

ログイン後にコピー

2. IE6 でフローティング要素がある場合、コンテンツで幅をサポートする必要がある場合は、内部のすべてのブロック要素にフローティング要素を追加する必要はありません。

例:

 1 <style>  2 .box{ width:400px;}  3 .left{background:red;float:left;}  4 .right{float:right; background:blue;}  5 h3{margin:0;height:30px; float:left;}  6 /*  7  在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动  8 */  9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="left"> 14 <h3>左侧</h3> 15 </div> 16 <div class="right"> 17 <h3>右侧</h3> 18 </div> 19 </div> 20 </body>

ログイン後にコピー

3. IE6 では、要素の高さが 19px 未満の場合、19px として扱われます

解決策: overflow:hidden;

を追加します

4. IE6 border:1px dotted #000; では、dotted はサポートされていないため、点線として表示されます。

解決策: 背景タイルをカットします

5. すべてのブラウザで、子要素の margin-top と margin-bottom の値が親に渡されます。 a: 両方の親に float を追加します (または子に float を追加することでもマージントップ問題を解決できますが、左右のマージン値が

double

で表示されます。これは双方向データのバグ問題であり、これについては後で説明します)以下）; b: 親にposition:relative;（またはposition:absolute;ただしドキュメントフローから外れます）を追加します

c:display:inline-block;を追加します。 IE および 7 では、ブロック要素は表示をサポートしません :inline-block; d: 添付ファイルに border 属性を追加します (例: border:1px Solid red)。これは通常のブラウザでは実行可能ですが、IE6 ではズームを追加する必要があります。 :1;

eg:

 1 <style>  2 body{margin:0;}  3 .box{background:blue;border:1px solid #000; zoom:1;}  4 .div{width:200px;height:200px;background:red;margin:100px;}  5 /*  6  在IE6下解决margin传递要触发haslayout  7  8  在IE6下父级有边框的时候，子元素的margin值消失  9 10  解决办法:触发父级的haslayout 11 */ 12 </style> 13 </head> 14 <body> 15 <div class="box"> 16 <div class="div"></div> 17 </div> 18 </body>

ログイン後にコピー

IE6 では、ブロック要素には浮動および水平マージン値があり、水平マージン値は 2 倍になります。

解決策:

display:inline;を追加

 1 <style>  2 .box{ float:left;border:10px solid #000;}  3 .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}  4 /*  5  margin-right 一行右侧第一个元素有双边距  6  7  margin-left 一行左侧第一个元素有双边距  8 */  9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div>1</div> 14 <div>2</div> 15 <div>3</div> 16 <div>4</div> 17 </div> 18 </body>

ログイン後にコピー

7. IE6,7ではli自体はFloatではなく、liの中身がFloatになってliの下に隙間ができてしまいます

解決方法:

1. li に float を追加します 2.vertical-align:top; を追加します

注: IE6 での最小高さの問題が li のギャップの問題と共存する場合、li に float を追加することで解決できます。

eg:

 1 <style>  2 ul{margin:0;padding:0;width:302px;}  3 li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}  4 a{width:100px;float:left;height:30px;background:Red;}  5 span{width:100px;float:right;height:30px;background:blue;}  6 /*  7  在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙  8  解决办法:  9  1.给li加浮动 10  2.给li加vertical-align 11 */ 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li> 17 <a href="#"></a> 18 <span></span> 19 </li> 20 <li> 21 <a href="#"></a> 22 <span></span> 23 </li> 24 <li> 25 <a href="#"></a> 26 <span></span> 27 </li> 28 </ul> 29 </body>

ログイン後にコピー

子要素の行の幅の合計と親要素の幅の差が 3px を超える場合、または完全な行ステータスがない場合、下マージンは子要素の最後の行は IE6 では失敗します

解決策:

うーん、まだ見つかりません

例:

 1 <style>  2 .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;}  3 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}  4 /*  5  当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效  6 */  7 </style>  8 </head>  9 <body> 10 <div class="box"> 11 <div>1</div> 12 <div>2</div> 13 <div>3</div> 14 <div>4</div> 15 <div>1</div> 16 <div>2</div> 17 <div>3</div> 18 <div>4</div> 19 <div>1</div> 20 <div>2</div> 21 <div>3</div> 22 <!-- <div>4</div> --> 23 </div>

ログイン後にコピー

9. IE6 でのテキストオーバーフローのバグ。つまり、子要素の幅と親要素の幅の差が 3px 未満の場合、または 2 つのフローティング要素の間にコメントまたはインライン要素がある場合、IE6 ではテキストがオーバーフローします

解決策:

Useコメントまたはインライン要素を配置するには div 要素は div でラップされます。

例:

 1 <style>  2 .box{ width:400px;}  3 .left{float:left;}  4 .right{width:400px;float:right;}  5 </style>  6 </head>  7 <body>  8 <div class="box">  9 <div class="left"></div> 10 <!-- IE6下的文字溢出BUG --><span></span> 11 <div class="right">&darr;哈哈哈哈哈哈哈哈哈哈</div> 12 </div> 13 <!-- 14  在IE6下的文字溢出BUG 15 16  子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素 17 18  解决办法:用div把注释或者内嵌元素用div包起来 19 --> 20 </body>

ログイン後にコピー

10.

浮動要素と絶対配置要素が並列関係にある場合、IE6 では絶対配置要素が表示されなくなります。

解決策: 位置決めされた要素を div でラップします。

例:

 1 <style>  2 .box{ width:200px;height:200px;border:1px solid #000; position:relative;}  3 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}  4 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}  5 /*  6  当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失  7  解决办法:  8  给定位元素外面包个div  9 */ 10 </style> 11 </head> 12 <body> 13 <div class="box"> 14 <ul></ul> 15 <span></span> 16 </div>

ログイン後にコピー

11.

IE6 および 7 では、子要素が相対的に配置されている場合、親のオーバーフローが子要素をカバーできません。

解決策:

相対位置指定position:relative;を親にも追加します。

例:

 1 <style>  2 .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /* position:relative; */ }  3 .div{ width:150px;height:300px;background:yellow; position:relative;}  4 /*  5  在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素  6  7  解决办法: 给父级也加相对定位position:relative;  8 */  9 </style> 10 </head> 11 <body> 12 <div class="box"> 13 <div class="div"></div> 14 </div> 15 </body>

ログイン後にコピー

12. IE6 では、絶対配置要素の親の幅と高さが奇数の場合、要素の正しい値と下の値は 1px ずれます。

解決策: 頑張ってください偶数を使用する他の方法は見つかりませんでした。

13. IE6 では、position: 固定は効果がありません。
解決策:

jsを使用して制御します。。。

14.

IE6、7では入力型フォームコントロールの上下に1pxの隙間があります。

解決策: 入力に float を追加するか、絶対位置を追加します。

15.

IE6 および 7 では、入力タイプのフォームコントロールに border:none; を追加すると、境界線がまだ存在していることがわかります

解決策:

入力の背景をリセットします。 input{background:#fff;}; または、 border:0; または border:0 none; を使用します。