我在jquery中创建了一个滑块,根据点击的链接移动.slides-container
。除了Firefox(20.0)之外,这在每个主要浏览器(甚至ie9)中都能很好地工作。问题似乎是Firefox忽略了.info-container
的填充,因为当我禁用填充时,一切都运行得很漂亮。如何在不弄乱其他浏览器的情况下告诉jquery在进行计算时确认.info-container
的填充?任何人都有想法如何解决它?
JS
var contentwidth = parseInt($('.slides-content').innerWidth(), 10);
$('.slides-container').css({'width': $('.info-container').length*contentwidth});
$('.info-container').css({'width': contentwidth});
HTML
<div class="slides-content clearfix">
<div class="slides-container">
<div class="info-container me clearfix">
<div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, aliquam amet minus porro animi assumenda error esse sit explicabo quam quisquam ipsum nihil dignissimos. Dolorem quisquam quaerat maiores ducimus optio.</p></div>
</div>
<div class="info-container pics clearfix">
<div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, asperiores, fugit, necessitatibus officia facere tempora ad officiis sed est architecto voluptatibus enim in. Aspernatur amet fugiat repellat incidunt placeat voluptas.</p></div>
</div>
<div class="info-container about clearfix">
<div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, et perspiciatis quasi voluptatem maxime vero dolores iusto fugiat corporis ducimus cum at consectetur repellat culpa eius blanditiis ut? Eaque, assumenda?</p></div>
</div>
</div>
</div>
CSS
.slides-content {
overflow: hidden;
width: 100%;
}
.slides-container {
overflow: hidden;
position: relative;
}
.info-container {
padding: 35px;
position: relative;
background-color: #F8F8F8;
color: #7F7F7F;
font-size: 17px;
float: left;
line-height: 19px;
font-weight: 300;
.info {
position: relative;
float: left;
}
}
错误 正确
答案 0 :(得分:0)
检查info和info-container的内部宽度是否相同。