recherche

Maison >interface Web >tutoriel HTML >css-兼容性问题及解决（二）_html/css_WEB-ITnose

css-兼容性问题及解决（二）_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:32:04818parcourir

css-兼容性问题及解决(二)

四：IE6下双边距BUG ，也就是说，在IE6下块元素有浮动和横向的margin值，横向的margin值会被放大成两倍

  

 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下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个4px间隙
    
          


        解决办法:     
     
        1.给li加浮动，并且要加上宽度     
     
        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下
      
 
      
<strong>vertical-align:top</strong>
      
      
 
      

六：在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个4px间隙,如果和最小高都问题并存的时候，也要个li加浮动

      
              
 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>                    
      
      
 
             
 
      
   
   
        


    
    
         
    
    
      
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：单单用css可以做出这个效果吗求大神_html/css_WEB-ITnoseArticle suivant：HTML5视频标签video_html/css_WEB-ITnose
Articles Liés
Voir plus