Safari图像重叠问题
Safari浏览器有一个奇怪的CSS图像问题，并且无法在任何地方在线查找任何关于此问题的信息。
每件珠宝首饰在其下方都有一个缩略图。 如果有更多的缩略图可以放在那个空间中，我已经通过调整外部div的左边距来设置JS来让它们前后滑动（很像smoothdivscroll，但并不那么复杂）。
在Safari中出于某种原因，缩略图库中的第一张图片保持静止，而其他图片则在其上滚动。 看起来真的很糟糕。 我不明白为什么。 这可能是Safari中的一个错误吗？
我觉得这是一个CSS问题，因为在添加这个滑动功能之前，我们只有5个图像的限制，并且它们会在Safari中加载重叠和扭曲以及...
http://jeandousset.com/jewellery/engagement-rings/
示例HTML：
<div class="span12 offset6 product-images-container" style="margin-left: 140px;">
<div class="product-zoom-container">
<img id="eva-main-image" class="main-image" src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</div>
<div id="eva-gallery" class="product-gallery text-center">
<div class="scroll-products-right"></div>
<div class="scroll-products-left"></div>
<div class="scrollable-area">
<div class="product-gallery-inner" style="width: 420px; margin-left: -30px;">
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" title="eva-engagement-ring-cushion-cut-diamond-under" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle" alt=""></a>
<a href="#" class="product-thumbnail active" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" title="eva-engagement-ring-round-cut-diamond-front" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" title="eva-engagement-ring-cushion-cut-diamond-turned-profile" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
</div>
</div>
</div>
CSS：
.product-gallery {
*zoom: 1;
max-height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.product-gallery:before,
.product-gallery:after {
display: table;
content: "";
line-height: 0;
}
.product-gallery:after {
clear: both
}
.product-gallery .scrollable-area {
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
}
.product-gallery .scroll-products-right,
.product-gallery .scroll-products-left {
position: absolute;
width: 30px;
height: 100%;
background: url(./../img/arrow-small-left.png) center center no-repeat #fff;
background-color: rgba(255,255,255,0.6);
top: 0;
left: 0;
z-index: 20;
opacity: .6;
filter: alpha(opacity=60);
}
.product-gallery .scroll-products-right:hover,
.product-gallery .scroll-products-left:hover {
cursor: pointer !important;
background-color: rgba(255,255,255,0.8);
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .scroll-products-right {
right: 0;
left: auto;
background: url(./../img/arrow-small-right.png) center center no-repeat #fff;
background-color: rgba(255,255,255,0.6);
}
.product-gallery .product-thumbnail {
float: left;
max-width: 70px;
opacity: .5;
filter: alpha(opacity=50);
}
.product-gallery .product-thumbnail.active {
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .product-thumbnail:before,
.product-gallery .product-thumbnail:after {
content: ""
}
JS：
Dousset.product = {
currentWindowWidthMin: null,
currentInterval: null,
init: function () {
$('#wrapper').on('click', '.product-thumbnail', Dousset.product.thumbClicked);
// $('.product-thumbnail').css({
// 'float': 'none',
// 'display': 'inline-block'
// });
$('#wrapper').on('mousedown', '.scroll-products-right', Dousset.product.scrollThumbsLeft);
$('#wrapper').on('mousedown', '.scroll-products-left', Dousset.product.scrollThumbsRight);
$('#wrapper').on('mouseup', '.scroll-products-left, .scroll-products-right', function(e){
clearTimeout(Dousset.product.currentInterval);
Dousset.product.currentInterval = null;
});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('#wrapper').on('click', '.scroll-products-right', Dousset.product.scrollThumbsLeftBatch);
$('#wrapper').on('click', '.scroll-products-left', Dousset.product.scrollThumbsRightBatch);
}
Dousset.product.setCurrentWindowWidthMin();
$(window).resize(Dousset.product.windowResized);
},
thumbClicked: function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
var postId = $(this).data('post-id');
var newImg = $(this).data('image');
$('.main-image[data-post-id="'+postId+'"]').attr('src', newImg);
$('.product-thumbnail[data-post-id="'+postId+'"]').removeClass('active');
$(this).addClass('active');
}
},
scrollThumbsLeft: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.css({
'margin-left' : '-=1'
});
}
},10);
},
scrollThumbsRight: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.css({
'margin-left' : '+=1'
});
}
},10);
},
scrollThumbsLeftBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.animate({
'margin-left' : '-=70'
});
}
},
scrollThumbsRightBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.animate({
'margin-left' : '+=70'
});
}
},
setCurrentWindowWidthMin: function () {
Dousset.product.currentWindowWidthMin = $( window ).width() > 979 ? 980 : $( window ).width() > 767 ? 768 : 480;
},
windowResized: function () {
var oldWinMin = Dousset.product.currentWindowWidthMin;
Dousset.product.setCurrentWindowWidthMin();
}
}
$(document).ready(function(){
Dousset.product.init();
});
我不能说为什么这个工作，或者如果只是这样，但我给标签添加了宽度和高度，并将动画移动到css3而不是jQuery。
这似乎是诀窍。 您可以访问以上链接查看。
感谢任何人的努力。
并感谢@JoshC进行这些代码编辑。
链接地址: http://www.djcxy.com/p/15843.html