jquery - RoyalSlider 溢出是可见的 IE 10

Question

我正在使用 Royal Slider 创建幻灯片但它仅在 IE10 中表现不佳。

我创建了一个 fiddle 来显示问题:http://jsfiddle.net/vwDFa/6/ .

将鼠标悬停在幻灯片上，拖到下一张幻灯片，然后返回到第一张幻灯片。当你回来时，溢出会出现一秒钟(第一次很难看到)。 IE10 是唯一执行此操作的浏览器。

这张图片显示了我的网站在 IE10 中发生的情况(蓝色箭头后可见溢出):

标记(很抱歉代码太长，我尽可能地修剪了它):

<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 设置问题？

Answer 1

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

centerArea: 1

附言我想你也想要 .main 而不是 #main

工作 fiddle :

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

“附近可见”数据使附近的事物可见(如下一帧)，就像您正在体验的那样。如果您不想这样做，您实际上可以删除整个 block 。

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

更多 fiddle :

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