Question

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

这是IE6

这是IE7

这是IE8

和IE9一样好用

如您所见，IE8和IE9工作正常。菜单与侧边栏对接。我已经愚弄了一段时间，但一直没能解决它。

HTML结构只是一个div＆gt; ul＆gt;李某

在编写任何代码之前，我已经将CSS重置归零。有谁知道是什么原因引起的？

非常感谢你的帮助

Answer 1

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

DEMO

经过Browserling测试。

Answer 2

没有CSS很难分辨。

但我会说几件事：

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

Answer 3

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

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

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

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

在你的情况下，你可以这样做：为该ul：bd_links

添加了类

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

Answer 5

您可以通过

进行检查

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

如果你已经填充了每个填充边距。

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

5 个答案: