vertical-align:top
" > 子要素の行の幅の合計と親の幅が 3px を超えているため、子要素の最後の行の下マージンは IE6 では失敗します 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;} 9 9 a{width:100px;float:left;height:12px;background:Red;}10 span{width:100px;float:right;height:12px;background:blue;}11 /*12 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13 解决办法:14 1.给li加浮动并且要加上宽度15 2.给li加vertical-align16 17 当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动18 */19 </style>20 </head>21 <body>22 <ul>23 <li>24 <a href="#"></a>25 <span></span>26 </li>27 <li>28 <a href="#"></a>29 <span></span>30 </li>31 <li>32 <a href="#"></a>33 <span></span>34 </li>35 </ul>36 </body>37 </html>ログイン後にコピー
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;} 9 9 a{width:100px;float:left;height:12px;background:Red;}10 span{width:100px;float:right;height:12px;background:blue;}11 /*12 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13 解决办法:14 1.给li加浮动并且要加上宽度15 2.给li加vertical-align16 17 当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动18 */19 </style>20 </head>21 <body>22 <ul>23 <li>24 <a href="#"></a>25 <span></span>26 </li>27 <li>28 <a href="#"></a>29 <span></span>30 </li>31 <li>32 <a href="#"></a>33 <span></span>34 </li>35 </ul>36 </body>37 </html>
css の互換性の問題と解決策 (1)_html/css_WEB-ITnose
CSS 互換性の問題と解決策 (1)
1: IE6 では要素の高さが 19px 未満である場合、19px として扱われます
解決策: overflow:hidden;
2: 1px ドットは IE6 ではサポートされていません
解決策: 背景タイルをカットします
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{height:2px;background:red;overflow:hidden;} 8 /* 9 IE6下最小高度问题10 在IE6下元素的高度的小于19px的时候，会被当做19px来处理11 解决办法:overflow:hidden;12 */13 </style>14 </head>15 <body>16 <div class="box"></div>17 </body>18 </html>
3 :
親には IE6 の下に境界線があります。子要素のマージン値は、IE6の下でのマージン転送の問題を解決するために消えます。子要素は IE6 では無効です
triggers haslayout
4: IE6 でのダブルマージンのバグ、つまり、IE6 では、ブロック要素には浮動および水平マージン値があり、水平マージン値は 2 倍に拡大されます
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{ width:100px;height:100px;border:1px dotted #000;} 8 /* 9 1px dotted 在IE6下不支持10 解决办法:切背景平铺11 */12 </style>13 </head>14 <body>15 <div class="box"></div>16 </body>17 </html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>body{margin:0;}.box{background:blue;border:1px solid #000;zoom:1;}.div{width:200px;height:200px;background:red;margin:100px;}/* 在IE6下解决margin传递要触发haslayout 在IE6下父级有边框的时候，子元素的margin值消失 解决办法:触发父级的haslayout*/</style></head><body><div class="box"> <div class="div"></div></div></body></html>
5: IE6 および 7 では、li 自体はフローティングされませんが、li の内容はフローティングされ、4px のギャップが生じますliの下に生成されます
解決方法:
1. liにfloatを追加し、幅を追加します 2. liにvertical-alignを追加します
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body{margin:0;} 8 .box{width:200px;height:200px;background:Red;float:left;margin:100px;display:inline;} 9 /*10 IE6下双边距BUG11 在IE6，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍12 解决办法: display:inline;13 */14 </style>15 </head>16 <body>17 <div class="box"></div>18 </body>19 </html>ie6,7
6: IE6 および 7 では、li 自体はフローティングされませんが、li の内容はフローティングされ、
最小の高さの場合、li の下に 4px の隙間が表示されます。問題が共存する場合は、li を追加する必要があります。 Float
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:30px;border:1px solid #000;vertical-align:top; } 9 a{width:100px;float:left;height:30px;background:Red;}10 span{width:100px;float:right;height:30px;background:blue;}11 /*12 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13 解决办法:14 1.给li加浮动 ，并且要加上宽度15 2.给li加vertical-align16 */17 </style>18 </head>19 <body>20 <ul>21 <li>22 <a href="#"></a>23 <span></span>24 </li>25 <li>26 <a href="#"></a>27 <span></span>28 </li>29 <li>30 <a href="#"></a>31 <span></span>32 </li>33 </ul>34 </body>35 </html>
7:
子要素の行の幅の合計と親要素の幅の差が超える場合3px、、または完全な行ステータスがありません。最終的に、子要素の行の下マージンは IE6 では無効になります
解決策: 親要素と子要素の幅を正確に計算します または、行がいっぱいではない場合、子要素の最後の行の下マージンは IE6 では無効になります
<strong>vertical-align:top</strong>
ログイン後にコピー
<strong>vertical-align:top</strong>
子要素の行の幅の合計と親の幅が 3px を超えているため、子要素の最後の行の下マージンは IE6 では失敗します 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;} 9 9 a{width:100px;float:left;height:12px;background:Red;}10 span{width:100px;float:right;height:12px;background:blue;}11 /*12 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13 解决办法:14 1.给li加浮动并且要加上宽度15 2.给li加vertical-align16 17 当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动18 */19 </style>20 </head>21 <body>22 <ul>23 <li>24 <a href="#"></a>25 <span></span>26 </li>27 <li>28 <a href="#"></a>29 <span></span>30 </li>31 <li>32 <a href="#"></a>33 <span></span>34 </li>35 </ul>36 </body>37 </html>ログイン後にコピー
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul{margin:0;padding:0;width:302px;} 8 li{ list-style:none;height:12px;border:1px solid #000;overflow:hidden; float:left;width:300px;} 9 9 a{width:100px;float:left;height:12px;background:Red;}10 span{width:100px;float:right;height:12px;background:blue;}11 /*12 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙13 解决办法:14 1.给li加浮动并且要加上宽度15 2.给li加vertical-align16 17 当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动18 */19 </style>20 </head>21 <body>22 <ul>23 <li>24 <a href="#"></a>25 <span></span>26 </li>27 <li>28 <a href="#"></a>29 <span></span>30 </li>31 <li>32 <a href="#"></a>33 <span></span>34 </li>35 </ul>36 </body>37 </html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7667
15
1393
52
1205
24
91
11
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
