jQuery 和 CSS 与 'margin: 0 auto;' 冲突在 Chrome 和 Safari 中

Question

我在我的页面中添加了一个 jquery 滑块，在所有浏览器中进行测试后，图像在 Chrome 和 Safari 中单击时不会更改。在 Firefox 和 IE 中它工作正常。我已经隔离了代码并意识到了错误，但不知道如何修复它。我导致滑块的css出现问题。欲了解更多信息，请查看http://jsfiddle.net/ryanabennett/vUvmA/1/

如果我取出边距：0 auto;它工作正常。那么有没有办法用滑块解决这个问题，还是有另一种方法可以让我的页面居中？

这是我的 HTML：

<div align="center" style="width: 1000px; margin: 0 auto;">
<div class="slideshow">
<!-- Slideshow HTML -->
    <div id="slideshow">
    <div id="slidesContainer">
        <div class="slide">
        <p>One</p>
        </div>
        <div class="slide">
        <p>Two</p>
        <div class="slide">
        <p>Three</p>
        </div>
        <div class="slide">
        <p>Four</p>
        </div>
    </div>
    </div>
    <!-- Slideshow HTML -->
</div></div>
</div>

这是我的 CSS：

.slideshow{
border: 1px solid;
float: left;
height: 350px;
margin-left: 50px;
width: 500px;
}

#slideshow {
margin: 0 auto;
position: relative; 
}
#slideshow #slidesContainer {
height: 350px;
margin: 0 auto;
overflow: auto;
position: relative;
width: 400px;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}

这是我的 JS：

$(document).ready(function(){
 var currentPosition = 0;
 var slideWidth = 400;
 var slides = $('.slide');
 var numberOfSlides = slides.length;

 // Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
  'float' : 'left',
  'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
 .bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 :currentPosition-1;

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{        

$('#rightControl').show() }
}    
});

访问一下会更方便：http://jsfiddle.net/ryanabennett/vUvmA/1/

**更新 - 我们中的一些人已经看过这个，但似乎仍然无法纠正它。有没有其他人有任何想法。

Answer 1

我知道这很旧，但是我注意到您的 html 有两件事（编辑了您的小提琴，并且使用 Safari 对我来说效果很好）。首先在您的标记中使用第二个

您缺少结束的

标记，然后在您想要居中的打开 div 容器中删除 align="center" （因为现在在 html5 中已弃用），分配一个 ID 或类并使用这个 css：

#yourID { 
   position: relative; 
   margin: 0px auto; 
   width: 1000px; 
   text-align: center; 
}

您还需要在末尾删除一个结束 div 标记。

Answer 2

如果您更改开头的行：

$('.control').bind('click', function(){});

使用live 代替bind

$('.control').live('click', function(){});

它修复了部分问题，但动画在 Chrome 中看起来仍然不一样。需要深入挖掘。 此外，您还需要在点击处理程序中添加e.preventDefault();。这样做现在将允许它在 Chrome/Safari 中工作。

而且，是的，最好使用delegate 而不是@AlienWebguy 所述的live。

编辑：这个答案显然不起作用，我想知道这是否是 jQuery 中的实际 defect。