RoyalSlider溢出可见IE 10

时间：2014-01-31 21:47:22

标签： jquery css slider internet-explorer-10

我正在使用Royal Slider创建幻灯片，但它仅在IE10中行为不端。

我创建了一个小提示来显示问题：http://jsfiddle.net/vwDFa/6/。

将鼠标悬停在幻灯片上，拖动到下一张幻灯片，然后返回到第一张幻灯片。当你回来时，溢出是可见的一秒钟（第一次很难看到它）。 IE10是唯一能够做到这一点的浏览器。

此图片显示了我的网站在IE10中发生的事情（蓝色箭头后可见溢出）： IE10 bug

标记（对不起长代码，我尽可能地修剪它）：

<div class="main">
    <div class="royalSlider heroSlider rsMinW rsHor rsWithBullets" id="full-width-slider">
        <div class="item">
            <div class="news-feed-item" style="border-left-color: rgb(204, 204, 204); border-left-width: 1px; border-left-style: solid;">
                <div class="news-data">
                    <div class="title text-when-feed">Stay Classy: Watch our one-on-one with <i>Anchorman 2</i>'s Will Ferrell</div>
                    <div class="overflow" style="margin: 0px; border-radius: 0px; border: 0px rgb(0, 0, 0); width: 212px; height: 100px; overflow: hidden; float: none; position: relative;">
                        <div class="description text-when-feed" style="margin: 0px; border: 0px currentColor; left: 0px; top: 0px; height: 100px; overflow: auto; padding-right: 24px;">
                            <div class="ExternalClassFC1894FA843E4EEABAFC80CA39E45A4B"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news-feed-item">
                <div class="news-data">
                    <div class="title text-when-feed">Stay Classy: Watch our one-on-one with <i>Anchorman 2</i>'s Will Ferrell</div>
                    <div class="overflow" style="margin: 0px; border-radius: 0px; border: 0px rgb(0, 0, 0); width: 212px; height: 100px; overflow: hidden; float: none; position: relative;">
                        <div class="description text-when-feed" style="margin: 0px; border: 0px currentColor; left: 0px; top: 0px; height: 100px; overflow: auto; padding-right: 24px;">
                            <div class="ExternalClass803AEC05C6824A5788848654FE955202"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news-feed-item">
                <div class="news-data">
                    <div class="title text-when-feed">Stay Classy: Watch our one-on-one with <i>Anchorman 2</i>'s Will Ferrell</div>
                    <div class="overflow" style="margin: 0px; border-radius: 0px; border: 0px rgb(0, 0, 0); width: 212px; height: 100px; overflow: hidden; float: none; position: relative;">
                        <div class="description text-when-feed" style="margin: 0px; border: 0px currentColor; left: 0px; top: 0px; height: 100px; overflow: auto; padding-right: 24px;">
                            <div class="ExternalClass932B501F43114EC09931584B98E42717"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="news-feed-item" style="border-left-color: rgb(204, 204, 204); border-left-width: 1px; border-left-style: solid;">
                <div class="news-data">
                    <div class="title text-when-feed">Stay Classy: Watch our one-on-one with <i>Anchorman 2</i>'s Will Ferrell</div>
                    <div class="overflow" style="margin: 0px; border-radius: 0px; border: 0px rgb(0, 0, 0); width: 212px; height: 100px; overflow: hidden; float: none; position: relative;">
                        <div class="description text-when-feed" style="margin: 0px; border: 0px currentColor; left: 0px; top: 0px; height: 100px; overflow: auto; padding-right: 24px;">
                            <div class="ExternalClass02301D674D5A4CD29F09A8A903EEE81C">
                                <p style="margin-top: 0px;">Ron Burgundy and the Channel 4 News team are back on the big screen in <a style="color: rgb(80, 134, 222);" href="" target="_blank"><em>Anchorman 2: The Legends Continues</em></a>. With the '70s behind them and the modern "Me" decade upon them, San Diego's top rated foursome kick off the 1980s trying their best to stay classy while grappling with the troubling new phenomenon of 24-hour news channels. Can Ron (<strong>Will Ferrell</strong>), weather man Brick (<strong>Steve Carell</strong>), man on the street Brian (<strong>Paul Rudd</strong>) and sports guy Champ (<strong>David Koechner</strong>) handle this new state of affairs or will the pressure have them breaking down in glass cases of emotion? Our bets are on the latter.Cineplex's own Jolanda Grillone sat down with Ferrell -- the man behind the <em>Anchorman</em> legend -- to talk on his successful partnership with <strong>Adam McKay</strong>, where their idea for this kind-of-a-big-deal sequel came from and just how we can stay classy under pressure. Watch the interview below now:</p>
                                <p style="margin-top: 0px;">See <a style="color: rgb(80, 134, 222);" href="" target="_blank"><em>Anchorman 2: The Legends Continues</em></a><em></em> in theatres starting today.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news-feed-item">
                <div class="news-data">
                    <div class="title text-when-feed">Stay Classy: Watch our one-on-one with <i>Anchorman 2</i>'s Will Ferrell</div>
                    <div class="overflow" style="margin: 0px; border-radius: 0px; border: 0px rgb(0, 0, 0); width: 212px; height: 100px; overflow: hidden; float: none; position: relative;">
                        <div class="description text-when-feed" style="margin: 0px; border: 0px currentColor; left: 0px; top: 0px; height: 100px; overflow: auto; padding-right: 24px;">
                            <div class="ExternalClassE36F7671767943EDA4F8E9BB51F87CEC">
                                <p style="margin-top: 0px;">See <a style="color: rgb(80, 134, 222);" href="" target="_blank"><em>Anchorman 2: The Legends Continues</em></a><em></em> in theatres starting today.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="news-feed-item">
                <div class="news-data">
                    <div class="title text-when-feed">Stay Classy: Watch our one-on-one with <i>Anchorman 2</i>'s Will Ferrell</div>
                    <div class="overflow" style="margin: 0px; border-radius: 0px; border: 0px rgb(0, 0, 0); width: 212px; height: 100px; overflow: hidden; float: none; position: relative;">
                        <div class="description text-when-feed" style="margin: 0px; border: 0px currentColor; left: 0px; top: 0px; height: 100px; overflow: auto; padding-right: 24px;">
                            <div class="ExternalClass1A77CE7AC610487A807D709C76747733">
                                <p style="margin-top: 0px;">See <a style="color: rgb(80, 134, 222);" href="" target="_blank"><em>Anchorman 2: The Legends Continues</em></a><em></em> in theatres starting today.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS： 

#main {
    float:left;
    position:relative;
    width:732px;
    height:158px;
    margin-top:10px;
}
.item {
    float:left;
    height:140px;
    width: 680px;
    overflow:hidden;
    position:relative;
}
.news-feed-item {
    overflow:hidden;
    float:left;
    position:relative;
    height:138px;
    width: 225px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    background-color:rgb(243, 243, 243);
}
.news-feed-item .news-data {
    float:left;
    width: 214px;
    padding-left:5px;
}
.news-data {
    font-family:"segoe-regular";
    float:left;
    padding-left:5px;
    color: black;
}
.title {
    font-family:"segoe_uisemibold";
    position:inherit;
    z-index: 200;
    color:#339dde;
    font-size:12px;
    line-height:14px;
    padding-bottom:3px;
    padding-top:5px;
    background-color:rgb(243, 243, 243);
    width: 212px;
}
.news-item .description {
    float:left;
    z-index:100;
    font-size:11px;
    line-height:16px;
}
.news-feed-item .description {
    font-size:11px;
    line-height:16px;
}
/* Slider styling*/
 #full-width-slider {
    width: 100%;
    height:140px;
    color: #000;
}
.fullWidth {
    margin: 0 auto 12px;
    overflow: visible !important;
}

JS： 

function createSlider() {
    $('.royalSlider').royalSlider({
        arrowsNav: true,
        loop: false,
        keyboardNavEnabled: false,
        controlsInside: false,
        imageScaleMode: 'fill',
        arrowsNavAutoHide: true,
        autoScaleSlider: false,
        controlNavigation: 'bullets',
        thumbsFitInViewport: false,
        navigateByClick: true,
        sliderDrag: true,
        sliderTouch: true,
        startSlideId: 0,
        autoPlay: false,
        transitionType: 'move',
        globalCaption: true,
        visibleNearby: {
            enabled: true,
            center: false,
            centerArea: 0.91
        },
        /* size of all images */
        imgWidth: 227,
        imgHeight: 140
    });

    /* Show Navigation Arrows on load */
    $(".rsArrowRight, .rsArrowLeft").removeClass("rsHidden");

    setTimeout(function () {
        $(".rsArrowRight, .rsArrowLeft").addClass("rsHidden");
    }, 1500);
}

$(document).ready(function () {
    createSlider();
})

我想要隐藏发生的溢出，如果你将行为与IE8或Chrome进行比较，你会看到差异。这是IE10的错误吗？插件错误？

编辑我无法在另一台计算机上使用模拟器在Chrome中重现此问题。这可能是IE设置问题？

1 个答案:

答案 0 :(得分：0)

在javascript中更改centerArea: 1，如下所示：

centerArea: 1

P.S。我想你也想要.main而不是#main

工作小提琴：

http://jsfiddle.net/vwDFa/7/

附近的“可见附近”数据会使附近的内容可见（如下一帧所示），就像您遇到的那样。如果你不想要，你可以删除整个块。

visibleNearby: {
    enabled: true,
    center: false,
    centerArea: 0.91
},

更多小提琴：

http://jsfiddle.net/vwDFa/8/

相关问题
最新问题