search

Home  >  Article  >  Web Front-end  >  讨论IE6/IE7中li底部4px的Bug_html/css_WEB-ITnose

讨论IE6/IE7中li底部4px的Bug_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:551052browse

当li的子元素中有浮动（float）时，IE6/IE7中

  • 元素的下面会产生4px空隙的bug。

    XHTML    

    <ul class="list">    <li><div>vapour</div></li>    <li><div>百度</div></li>    <li><div>淘宝</div></li>    <li><div>迅雷</div></li></ul>

     

    经过测试发现：li的子元素浮动是这个bug产生的必要条件，这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

               知道了这个bug的产生条件，所以解决方法也就有了：

            方法1        #list div设置clear:left|both，这时#list li不能设置width、height、zoom。        方法2        #list li设置float:left，这时#list li可以设置width、height、zoom。        #list li设置clear:left|both，这时#list li不能设置width、height、zoom。        方法3

     

       IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了，只要加上vertical-align的值是三者之一即可。

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>IE6/IE7中li底部3px的Bug</title><style type="text/css">ul { margin: 0; padding: 0; list-style: none; }hr { clear: both; }.list li { width: 420px; }.list div { float: left; width: 400px; height: 24px; background: red; }.v-top div { vertical-align: top; }.v-middle div { vertical-align: middle; }.v-bottom div { vertical-align: bottom; }</style></head><body><ul class="list">  <li><div>vapour</div></li>  <li><div>百度</div></li>  <li><div>淘宝</div></li>  <li><div>迅雷</div></li></ul><hr /><ul class="list v-top">  <li><div>vapour</div></li>  <li><div>百度</div></li>  <li><div>淘宝</div></li>  <li><div>迅雷</div></li></ul><hr /><ul class="list v-middle">  <li><div>vapour</div></li>  <li><div>百度</div></li>  <li><div>淘宝</div></li>  <li><div>迅雷</div></li></ul><hr /><ul class="list v-bottom">  <li><div>vapour</div></li>  <li><div>百度</div></li>  <li><div>淘宝</div></li>  <li><div>迅雷</div></li></ul></body></html>

    firefly

    • Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：css所有选择器的详解_html/css_WEB-ITnoseNext article：CSS的一些简单概念_html/css_WEB-ITnose

    Related articles

    See more