Question

Checkout http://new.reyniersaudio.com/index.php?task=browse&view=model&modelId=17如果您注意到IE8，Firefox，Chrome和Opera，右侧边栏会显示正确的间距。在IE6和IE7中，它太过分散了。我的css中有什么能够实现这一目标。

Answer 1

我使用IE 6中的Internet Explorer Developer Toolbar来确定间距问题是围绕每个部分（<li class="subType subType##"内部）<ul class="partType partType##">开始的。

当我使用开发人员工具栏将样式更改为display: inline时，IE 6中的额外垂直间距消失了。

我修改了cartSideBar.css并重新定义了：

#cartComputer LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
}

为：

#cartComputer LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
    DISPLAY: inline;
}

我在IE 6,7和＆amp ;;中测试了结果。 8，Firefox 2,3＆amp; 3.5，Opera 9.6＆amp; 10，Safari for Windows 3＆amp; 4和Google Chrome。它们似乎都没问题。您需要执行更深入的测试，以确保它不会对其他布局产生负面影响。

您可能希望将更改仅隔离到subType类，以确保它不会影响li下的其他#cartComputer元素：

#cartComputer LI.subType {
    display: inline;
}

Answer 2

我的任何一台计算机上都没有IE6（感谢上帝），但有一件事要尝试：

删除问题区域周围元素之间的所有空格（空格，制表符，换行符）。 IE6（和我相信的IE7）喜欢占据那个空白 - 应该很好在那里 - 并将布局全部吹到地狱。

<div>I should be fine, but I'm not in IE</div>
<div>I should be fine, but I'm not in IE</div>

“修复”的IE6版本：

<div>I am now fine in IE</div><div>I am now fine in IE</div>

Answer 3

不是答案，但请在IE 6和/或7中试一试。http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

它可能能够帮助您诊断问题。我猜这些版本的IE没有取得对margin / padding的更改（“table.css”和“cartSideBar.css”中的“H6”和“#cartComputer H6”样式。）

如果调试很麻烦，Quirksmode是解决此类问题的好资源。

Answer 4

我不确定这是否会有所帮助，但要确保所有打开的html标签都有一个结束标记。

Answer 5

brianreavis走在正确的轨道上。这很可能是一个“hasLayout”问题，你将在IE6中经常遇到这个问题。这是关于错误的很好的资源：http://www.satzansatz.de/cssd/onhavinglayout.html

如果您不能或不想将所有代码放在一行上，则有几种可能的CSS修复方法。我目前最喜欢的是添加缩放功能。将它添加到您的CSS ...

#cartComputer li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
zoom: 1;
}

奇怪的间距问题 - IE8运行良好，IE6和IE7咬合

5 个答案: