CSS の互換性の問題といくつかの一般的な問題の概要-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 16, 2016 am 08:39 AM

現在、主流のブラウザの互換性は比較的良好です。この記事では主に 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;

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

例:

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;

を追加します。

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 を追加すると問題を解決できます。

例:

子要素の行が占める幅と親要素の幅の合計が 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>

ログイン後にコピー

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

例:

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の属性*/

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7369

Java チュートリアル

1628

CakePHP チュートリアル

1354

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック