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

Question

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

Answer 1

我使用了 Internet Explorer Developer Toolbar在 IE 6 中确定间距问题始于 <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 进行更改类只是为了确保它不会影响其他li #cartComputer 下的元素:

#cartComputer LI.subType {
    display: inline;
}