ホームページ > 記事 > ウェブフロントエンド > css の互換性の問題と解決策 (2)_html/css_WEB-ITnose
css の互換性の問題と解決策 (2)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:04747ブラウズ
CSS 互換性の問題と解決策 (2)
4: IE6 でのダブル マージンのバグ。つまり、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 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>
5: IE6 および 7 では、li 自体は浮動しませんが、li の内容は浮動し、li の下に 4px のギャップが生成されます
解決策:
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 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>
ie6,7 under
りー
6: IE6 および 7 では、li 自体は浮動しませんが、li の内容は浮動し、li の下に 4px の隙間が表示されます。 最小高さの問題が共存する場合は、li も必要です。フロート
りー
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。