简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

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

WBOY
Release： 2016-06-24 11:31:55
Original
1003 people have browsed it

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

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

    XHTML

       
    • vapour
      •  
    • 百度
      •  
    • 淘宝
      •  
    • 迅雷
    Copy after login

    经过测试发现：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的值是三者之一即可。

    IE6/IE7中li底部3px的Bug

       
    • vapour
      •  
    • 百度
      •  
    • 淘宝
      •  
    • 迅雷
       
    • vapour
      •  
    • 百度
      •  
    • 淘宝
      •  
    • 迅雷
       
    • vapour
      •  
    • 百度
      •  
    • 淘宝
      •  
    • 迅雷
       
    • vapour
      •  
    • 百度
      •  
    • 淘宝
      •  
    • 迅雷
    Copy after login

    firefly

    • Related labels：
    讨论IE6/IE7中li底部4px的Bug
    source：php.cn
    Previous article：css所有选择器的详解_html/css_WEB-ITnose Next article：CSS的一些简单概念_html/css_WEB-ITnose
    Statement of this Website
    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
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    1
    942
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    9
    1018
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    934
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    0
    793
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    873
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！