Internet Explorer css 问题。（隐藏填充）答案

【问题标题】：Internet explorer css problem. (Hidden padding)Internet Explorer css 问题。（隐藏填充）
【发布时间】：2011-04-19 23:53:51
【问题描述】：

我使用 jQuery UI 创建了一个小滑块，它在 Firefox 中运行得非常好，完全符合它的要求。然而，在 IE 中，它似乎在对象之间放置了填充。看看就知道了：

http://www.grant[deletethis]unwin.co.uk/slider/slider1.html

我了解不同的浏览器会自动设置不同的页边距和填充，所以我尝试使用：

* {
    padding: 0px;
    margin: 0px;
}

但问题依然存在。

问题：

如何消除滑块上图片之间的间隙（在 IE 中）？

【问题讨论】：

标签： javascript jquery html css doctype

【解决方案1】：

您的页面正在Quirks Mode 中呈现，因为您没有使用a doctype（..这将触发标准模式）。

您的第一行目前是这样的：

<html>

在第一行添加一个文档类型，例如 HTML5 文档类型：

<!DOCTYPE html>

它会被神奇地修复。

【讨论】：

【解决方案2】：

请添加有效的文档类型，因为您的网站正在 IE 中以Quirks 模式查看。

<!DOCTYPE html>
<html> .... </html>

另外
移除 img 元素本身的浮点数并设置 display: block;

.scroller_item {
    float: left;
    height: 238px;
    width: 192px;
}

.scroller_item .image {
    display: block;
    height: 238px;
    width: 192px;
}

【讨论】：

您不需要答案的第一部分（现在是第二部分）；）
@thirtydot：确实如此，虽然内联图像以留下 3px 间隙（通常在底部）而闻名，但 display: block 修复了这个问题。

【解决方案3】：

我建议使用重置将所有浏览器中的所有样式归零。使用它应该可以解决您的问题。 Eric Meyer's Reset

【讨论】：

【解决方案4】：

尝试添加：

*
{
  padding: 0px;
  margin: 0px;
  border: none;
}

#sliding_section
{
  overflow: auto;
}

您必须调整 * 属性，因为这对生产站点不利，但它可能会起作用。

【讨论】：

【解决方案5】：

尝试在 CSS 类的“.scroller_item .image”定义中删除“float:left”。

【讨论】：