CSS、JQuery Cycle 和 IE 问题

Question

我正在使用一个名为"Cycle"的jQuery插件，但在IE浏览器中遇到了CSS问题。它在Opera、Firefox、Chrome和Safari中看起来很完美，但是IE却出现了问题。

网站链接：www[dot]photographicpassions[dot]com/home

在右侧的“最新作品”下面有缩略图。在Firefox、Safari、Chrome和Opera中，灰色容器在所有缩略图后面，但在IE中，灰色背景只覆盖了缩略图的顶部。我尝试了各种方法来解决它，但都没有成功。请问有人可以帮帮我吗？

这是不适用于IE的容器的CSS：

/* latest work container */
div#latestHolder {
    position: relative;
    float: left; width: 368px;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    background-color: #666666;
}

/* thumbnails */
div#nav {
    position: relative;
    float: left; left: 0px;
    width: 376px;
    padding: 0px 0px 0px 0px;
    margin: 1px 0px 0px 0px;
}
    div#nav li {
        width: 66px;
        float: left;
        padding: 0px 0px 0px 0px;
        margin: 9px 9px 0px 0px;
        list-style: none;
        cursor: pointer;
    }
    div#nav a {
        padding: 3px;
        display: block;
        background: #404040;
        cursor: pointer;
    }
        div#nav a.activeSlide {
            background: #ffffff;
            cursor: pointer;
        }
        div#nav a:focus {
            outline: none;
            cursor: pointer;
        }
    div#nav img {
        width: 60px;
        border: none;
        display: block;
        cursor: pointer;
    }

如果有人能帮忙解决这个问题，那就太好了！！：）

- SoulieBaby

Answer 1

只需在容器上使用overflow: hidden。默认情况下，overflow: auto不会增大元素以包含其内容。设置overflow: hidden（或overflow: auto...但这样可能会出现不必要的滚动条），您将强制使容器div扩展到其所有子元素的高度...包括浮动元素。

- jrista

---

尝试过了，但还是无法让它工作:(overflow: auto在div周围放置滚动条，并不会将其扩展到缩略图的高度（缩略图是使用jquery拉取的）。 - SoulieBaby

大多数情况下，您应该使用overflow: hidden。我通常只在设置特定的宽度和/或高度并实际需要滚动条时才保留overflow: auto。只是出于好奇...哪个版本的IE有问题？是IE6吗？我想我假设了IE7/8，但您无疑知道，IE6充满了错误。如果您需要IE6兼容性，则可能需要同时使用overflow: hidden和清除div。 - jrista

嗯...我刚刚注意到你也尝试了清除div，但它没有起作用。我需要查看你发布的网站，希望我能找出问题所在。 - jrista

目前我正在使用 PHP 的 hack，根据行数/缩略图的数量显示不同的高度... 我似乎无法在 IE 中使用常规 CSS 让它正常工作... 我认为 IE 没有识别出 jQuery ul/li 在容器内，但其他所有浏览器都可以... :/我正在使用 IE 7（我在笔记本电脑上也有 IE8，但我还没有检查过）顺便说一句- overflow: hidden 实际上会完全隐藏 IE 中的缩略图。 - SoulieBaby

没问题。哦，现在它会在所有浏览器中显示相同的高度，因为我实现了一个 PHP 脚本来处理高度（如果你正在使用 IE），基本上它会计算缩略图并相应地更改高度，我知道这不是最好的解决方法，但它有效。 :) - SoulieBaby

Answer 2

#latestHolder div被左浮动，导致它从页面流中移除。尝试使用相对/绝对定位代替float:left;或在结束#mainContainer div之前清除浮动。

清除浮动需要在#maincontainer div的末尾插入一个块级元素，如下所示：

<div style="clear: both;"></div>

- Evan Meagher

---

我尝试删除float:left并添加clear div，但在IE中没有任何变化，在其他浏览器中变得奇怪了.. :/ - SoulieBaby