【发布时间】：2014-02-01 12:06:41
【问题描述】：
我正在使用 Royal Slider 创建幻灯片，但它仅在 IE10 中出现异常。
我创建了一个小提琴来显示问题：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设置问题？
【问题讨论】：
标签： jquery css slider internet-explorer-10