IE 6/7 CSS 问题：无序列表中列表项的额外填充/边距答案

【问题标题】：IE 6/7 CSS Issue: Extra padding/margin on list item in unordered listIE 6/7 CSS 问题：无序列表中列表项的额外填充/边距
【发布时间】：2011-12-30 15:36:59
【问题描述】：

我在我正在构建的网站上遇到了 IE 6 和 7 的问题，您可以see here。在侧边栏和菜单的无序列表之间突然出现了一些额外的空间。

这里是 IE6

这里是 IE7

这里是 IE8

IE9 也能正常工作

如您所见，IE8 和 IE9 工作正常。菜单靠在侧边栏上。我一直在愚弄它，但一直无法修复它。

HTML结构只是一个div > ul > li a

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

非常感谢您的帮助

【问题讨论】：

可能与haslayout有关：stackoverflow.com/questions/5801338/…
Firebug Lite 没有告诉你它来自哪里吗？还是IE自带的调试工具？不过我同意 Jason 的观点，是时候让 IE

标签： css internet-explorer

【解决方案1】：

尝试将display: inline、float: left 和width: 100% 添加到您的lis。

DEMO

在Browserling 中测试。

【讨论】：

成功了！我将 display:inline 添加到 #sidebar ul li 然后将 display:block 添加到 #sidebar ul li a
@GarrettLeyenaar 很高兴为您提供帮助。

【解决方案2】：

没有 CSS 很难分辨。

但我想说几件事：

对于 IE6/7 人群来说，它是否需要完美像素？该网站看起来不错，即使有缩进，所以可能不需要修复。
如果你确实需要修复它，为什么不使用一些针对 IE6/7 的 conditional comments 然后设置负边距。

【讨论】：

它不需要像素完美，但我只是想提高我的技能并弄清楚它为什么这样做。谢谢您的帮助！感谢您抽出宝贵的时间！

【解决方案3】：

您需要标准化您的样式以获得更好的可移植性，浏览器之间的默认设置略有不同。

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

【讨论】：

【解决方案4】：

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

<!-- 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) 然后你可以为ie css问题添加特定的css文件。

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

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

ie6 ul.bd_links,ie7 ul.bd_links,
{
margin-left:-20px;
}

【讨论】：

【解决方案5】：

您可以通过输入来检查

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

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

【讨论】：