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(){});

，它可以解决部分问题，但动画在铬合金。需要更深入地挖掘。
此外，您还需要在点击处理程序中添加e.preventDefault();。现在这样做将允许它在 Chrome/Safari 中工作。

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

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