奇怪的间距问题 - IE8 效果很好，IE6 和 IE7 咬人答案

【问题标题】：Weird spacing issues - IE8 works great, IE6 and IE7 bite奇怪的间距问题 - IE8 效果很好，IE6 和 IE7 咬人
【发布时间】：2009-09-19 06:08:57
【问题描述】：

结帐http://new.reyniersaudio.com/index.php?task=browse&view=model&modelId=17，如果您在 IE8、Firefox、Chrome 和 Opera 上注意到，右侧边栏会显示适当的间距。在 IE6 和 IE7 中，它的间隔太远了。我的 css 中有什么可以实现这一点。

【问题讨论】：

他的意思是右侧菜单元素之间的垂直间距。

标签： css internet-explorer

【解决方案1】：

我使用 IE 6 中的 Internet Explorer Developer Toolbar 确定间距问题始于围绕每个 part 的 <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 和 8、Firefox 2、3 和 3.5、Opera 9.6 和 10、适用于 Windows 3 和 4 的 Safari 和 Google Chrome 中测试了结果。他们似乎都还好。您需要执行更深入的测试，以确保它不会对其他布局产生负面影响。

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

#cartComputer LI.subType {
    display: inline;
}

【讨论】：

【解决方案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>

【讨论】：

并且最重要的是告诉你的老板，你应该为这份工作获得危险的工作报酬。 IE6 对您的健康有害。

【解决方案3】：

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

它也许可以帮助您诊断问题。我猜那些版本的 IE 并没有接受你对边距/填充的更改（“table.css”和“cartSideBar.css”中的“H6”和“#cartComputer H6”样式。）

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

【讨论】：

非常有用的调试工具。仍然找不到解决办法。我认为这可能是由于我的 javascript 生成了额外的 UL、LI 项目。回到我去的程序员那里。

【解决方案4】：

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

【讨论】：

【解决方案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;
}

【讨论】：