【问题标题】:CSS, JQuery Cycle and IE issueCSS, JQuery Cycle 和 IE 问题
【发布时间】:2009-06-01 02:10:15
【问题描述】:

我正在使用一个名为“Cycle”的 jQuery 插件,我在 IE 中遇到了 CSS 的问题,它在 Opera、FF、Chrome 和 Safari 中看起来很完美,但 IE 正在破解悲伤..

www[dot]photographicpassions[dot]com/home

您会在右侧看到“最新作品”和主图下方的缩略图,在 FF、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;
    }

如果有人可以帮助我,那就太好了! :)

【问题讨论】:

    标签: jquery css cycle


    【解决方案1】:

    只需使用溢出:隐藏在您的容器上。默认情况下,溢出:自动不会增长元素以包含其内容。设置 overflow: hidden (或 overflow: auto...bit 可能会出现不必要的滚动条),您将强制容器 div 扩展到其所有子元素的高度...包括浮动元素。

    【讨论】:

    • 嗯我试过了,但仍然无法让它工作:(溢出:自动在 div 周围放置滚动条并且不会将其扩展到缩略图的高度(被拉入使用 jquery)
    • 你应该使用 overflow: hidden 大部分时间。我通常在设置特定宽度和/或高度并实际需要滚动条时保留溢出:自动。只是出于好奇......哪个版本的IE有问题?是IE6吗?我想我假设是 IE7/8,但毫无疑问,IE6 充满了 bug。如果您需要 IE6 兼容性,您可能需要同时进行溢出:隐藏和清除 div。
    • 嗯...我刚刚注意到您也尝试了清除 div,但没有成功。我需要看看你的网站,我看到你发布了......希望我能找出问题所在。
    • 好吧,现在我正在使用 php hack,这取决于它显示不同高度的行/缩略图的数量。我似乎无法使用 IE 的常规 CSS 来工作。我认为 IE 没有发现 jQuery ul/li 在容器内,但所有其他浏览器都这样做.. :/ 我使用的是 IE 7(我的笔记本电脑上也有 IE8,但我没有检查过)btw-溢出:隐藏实际上完全隐藏了IE中的缩略图
    • 如果你能弄清楚,请告诉我,因为我不知道哈哈
    【解决方案2】:

    div #latestHolder 向左浮动,使其变为be removed from the flow of the page。尝试使用相对/绝对位置而不是 float:left; 或在结束 #mainContainer div 之前清除浮动。

    清除将涉及在#maincontainer div 的末尾添加一个块级元素,如下所示:

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

    【讨论】:

    • hmm 我试图删除 float: left 并添加了 clear div,但它没有改变 IE 中的任何内容,并且在其他浏览器中变得很奇怪.. :/
    猜你喜欢
    • 2013-02-11
    • 1970-01-01
    • 1970-01-01
    • 2011-09-19
    • 2011-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多