关于Internet Explorer：IE 6/7 CSS问题：无序列表中列表项的额外填充/边距


IE 6/7 CSS Issue: Extra padding/margin on list item in unordered list

我正在构建的站点上出现IE 6和7的问题，您可以在此处查看。侧边栏和菜单的无序列表之间突然出现一些额外的空间。

此处是IE6

这是IE7

这是IE8

IE9也可以

如您所见，IE8和IE9可以正常工作。菜单紧靠侧边栏。我已经在愚弄了一段时间，但还无法修复它。

HTML结构只是div> ul> li a

在编写任何代码之前，我还通过CSS重置将所有内容清零。有谁知道是什么原因造成的？

非常感谢您的帮助

相关讨论

尝试将display: inline，float: left和width: 100%添加到您的li s中。

演示

在Browserling中测试。

相关讨论

在没有CSS的情况下很难说。

但是我想说几件事：

  • 对于IE6 / 7人群是否需要像素完美？即使缩进，该站点看起来也不错，因此可能无需修复。

  • 如果确实需要修复它，为什么不使用一些针对IE6 / 7的条件注释，然后设置负的空白。

    • 相关讨论

    您需要规范化样式以提高可移植性，浏览器之间的默认设置略有不同。

    http://necolas.github.com/normalize.css/

    您可以通过输入

    进行检查

    1
    2
    3
    ul, li {
       list-style-position: inside;
    }

    如果您已将每个填充边距清零。

    1)您必须在html页面的head标签之前添加这些行。

    1
    2
    3
    4
    5
    6
    <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    <!--[if lt IE 7 ]> <html class="no-js ie6 ieb" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
    <!--[if IE 7 ]>    <html class="no-js ie7 ieb" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
    <!--[if IE 8 ]>    <html class="no-js ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
    <!--[if gte IE 9 ]>    <html class="no-js ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <![endif]-->
    <!--[if !IE]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!--<![endif]-->

    2)根据IE浏览器版本，这些行将特定类添加到html容器中。

    3)然后，您可以为CSS问题添加特定的CSS文件。

    4)在该文件中，您必须根据该浏览器提及属性。

    在您的情况下，您可以这样做：
    向该ul添加了类：bd_links

    1
    2
    3
    4
    ie6 ul.bd_links,ie7 ul.bd_links,
    {
    margin-left:-20px;
    }