ホームページ > 記事 > ウェブフロントエンド > css の互換性の問題と解決策 (1)_html/css_WEB-ITnose
css の互換性の問題と解決策 (1)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:03914ブラウズ
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>
子要素の行の幅の合計と親の幅が 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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。