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

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

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

解決策: 対応する親に overflow:hidden を追加しますが、一部の部分が非表示になりますので、幅と高さを正確に計算して設定するのが最善です。

例: (つまり開きます)

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

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

例:

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

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 ではブロック要素は display:inline-block; をサポートしません。

d: 添付ファイルに border 属性を追加します (例: border:1px Solid red)。これは通常のブラウザでは実行可能ですが、IE6 では、zoom:1;

を追加する必要があります。

例:

6.

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

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

解決策: display:inline;

を追加します。

7.

IE6 や 7 では、li 自体は浮動しませんが、li の内容は浮動し、li の下に隙間が生じます

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

解決策: 1. li に float を追加します。

2. li にvertical-align:top;

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

例:

8.

子要素の行が占める幅と親要素の幅の合計が 3px を超える場合、または行がいっぱいでない場合、子の最後の行の下マージン要素は IE6 では無効になります

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

解決策: うーん、まだ見つかりません

例:

9.

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

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

ではテキストがオーバーフローします。

解決策: div を使用して、div 内のコメントまたはインライン要素をラップします。

例:

10.

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

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

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

11.

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

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

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

例:

12.

IE6 では、絶対配置要素の親の幅と高さが奇数の場合、要素の右の値と下の値は 1px のずれが生じます。

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

解決策: 偶数を使用してみてください。他の方法はまだ見つかりません。

13.

IE6 では、position: 固定は効果がありません。

解決策: js を使用して制御します。 。 。

14.

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

解決策: 入力にフローティングまたは絶対位置を追加します。

15.

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

解決策: input{background:#fff;}; などの入力の背景をリセットするか、border:0; または border:0 none;

16.

IE6、7で入力型フォームコントロールに文字を入力すると、その背景画像も一緒に移動します。

解決策: 背景を親に追加します。

17.

CSS でフロートをクリーンアップするより簡潔な方法:

方法 1:

/* float をクリア */
.clearfix:after {
Visibility:hidden;
表示:ブロック;
フォントサイズ:0;
コンテンツ:" ";
クリア:両方;
高さ:0;
}
.clearfix {
ズーム:1;
}

方法 2:

親要素にコードを追加します: overflow:auto;

18. CSS 強制改行と強制改行なし:

/* 改行を禁止します */ .nowrap{word-break:keep-all;white-space:nowrap;}
/* 強制改行 */ .break{word-break:break-all;}

19. ハイパーリンクのスタイル設定:

a:link {color: #FF0000} /* 未訪問のリンク */
a:visited {color: #00FF00} /* 訪問済みのリンク */
a:hover {color: # FF00FF} /*マウスがリンクに移動します* /
A: アクティブ {color:#0000ff} /*選択されたリンク* /

タグの書式設定のデフォルトのスタイル;

20。css/js オンライン圧縮: (YUI Compressor ツールを使用)

http://ganquan.info/yui/?hl=zh-CN

21 行の幅が固定されており、内容が表示できない場合は、省略記号を追加します:

｛white-space:nowrap;

text-overflow:ellipsis; /* Internet Explorer の場合 */

オーバーフロー:非表示

幅:190ピクセル

表示:ブロック

テキストオーバーフロー:省略記号｝

text-overflow:ellipsis (3 つのドットを表す省略記号)

22。

margin-bottom:40px; /* ff*/

margin-bottom:140px9; /* IE6/7/8 の属性 */
color:red
_margin-bottom:450px; /*IE6/7の属性*/