Question

以下代码在FF，CH等中工作正常，但不会在IE中居中。它走向屏幕的右侧。

知道为什么吗？

<html>
    <head>
        <title>Sliding DIVs</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <style>
            * {
                margin:0px;
                padding:0px;
                font-family:arial;
                font-size:12px;
            }
            #cover {
                width:100%;
                height:400px;
                background:#EEEEEE;
                text-align:center;
            }
            #slides {
                width:1024px;
                height:400px;
                margin:0px auto;
            }
            .slide {
                width:1024px;
                height:400px;
                display:none;
                position:absolute;
                border:1px solid #000000;
            }
            .slide img {
                width:1024px;
                height:400px;
            }
            .first {
                display:block;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function()
            {
                var timeoutId;                                                              //To store timeout id

                var slideImage = function(step)
                {
                    if (step == undefined) step = 1;                                        //If undefined then set default value

                    clearTimeout(timeoutId);                                                //Clear timeout if any

                    var indx = $('.slide:visible').index('.slide');                         //Get current image's index

                    if (step != 0)                                                          //If step == 0, we don't need to do any fadein our fadeout
                    {
                        $('.slide:visible').fadeOut();                                      //Fadeout this slide
                    }

                    indx = indx + step;                                                     //Increment for next slide

                    if (indx >= $('.slide').length)                                         //Check bounds for next slide
                    {
                        indx = 0;
                    }
                    else if (indx < 0)
                    {
                        indx = $('.slide').length - 1;
                    }

                    if (step != 0)                                                          //If step == 0, we don't need to do any fadein our fadeout
                    {
                        $('.slide:eq(' + indx + ')').fadeIn();                              //Fadein next slide
                    }

                    timeoutId = setTimeout(slideImage, 2000);                               //Set Itmeout
                };

                slideImage(0);                                                              //Start sliding

                $('#prev').click(function()                                                 //When clicked on prev
                {
                    slideImage(-1);                                                         //SlideImage with step = -1
                });

                $('#next').click(function()                                                 //When clicked on next
                {
                    slideImage(1);                                                          //SlideImage with step = 1
                });

                $('#stop').click(function()                                                 //When clicked on Pause
                {
                    clearTimeout(timeoutId);                                                //Clear timeout

                    $(this).hide();                                                         //Hide Pause and show Play
                    $('#play').show();
                });

                $('#play').click(function()                                                 //When clicked on Play
                {
                    slideImage(0);                                                          //Start slide image

                    $(this).hide();                                                         //Hide Play and show Pause
                    $('#stop').show();    
                });
            });
        </script>
    </head>

    <body>
        <div id="cover">
            <div id="slides">
                <div class="slide first">1</div>
                <div class="slide">2</div>
                <div class="slide">3</div>
                <div class="slide">4</div>
            </div>
        </div>
    </body>
</html>

Answer 1

幻灯片类具有绝对位置，并将其移动到容器外部。

添加：

#slides {
    position:relative;
}

（已经建议）然后：

 .slide {
    left:0px;
 }

Answer 2

添加此项，以便您拥有.slides

的相对容器

#slides {
  position: relative;
 }

这是你想要的吗？

http://jsfiddle.net/CXKSC/2/

Answer 3

试试这段代码。我认为与@xivo说的大致相同。在IE浏览器中工作，但幻灯片在转换过程中会略微跳转。

<html> 
    <head> 
        <title>Sliding DIVs</title> 
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
        <style> 
            * { 
                margin:0px; 
                padding:0px; 
                font-family:arial; 
                font-size:12px; 
            } 
            #cover { 
                width:100%; 
                height:400px; 
                background:#EEEEEE; 
                text-align:center; 
                position:absolute
            } 
            #slides { 
                width:1024px; 
                height:400px; 
                margin:0px auto; 
            } 
            .slide { 
                width:1024px; 
                height:400px; 
                display:none; 
                position:relative;
                border:1px solid #000000; 
            } 
            .slide img { 
                width:1024px; 
                height:400px; 
            } 
            .first { 
                display:block; 
            } 
            </style> 
    <script type="text/javascript"> 
        $(document).ready(function() 
        { 
            var timeoutId;                                                              //To store timeout id 

            var slideImage = function(step) 
            { 
                if (step == undefined) step = 1;                                        //If undefined then set default value 

                clearTimeout(timeoutId);                                                //Clear timeout if any 

                var indx = $('.slide:visible').index('.slide');                         //Get current image's index 

                if (step != 0)                                                          //If step == 0, we don't need to do any fadein our fadeout 
                { 
                    $('.slide:visible').fadeOut();                                      //Fadeout this slide 
                } 

                indx = indx + step;                                                     //Increment for next slide 

                if (indx >= $('.slide').length)                                         //Check bounds for next slide 
                { 
                    indx = 0; 
                } 
                else if (indx < 0) 
                { 
                    indx = $('.slide').length - 1; 
                } 

                if (step != 0)                                                          //If step == 0, we don't need to do any fadein our fadeout 
                { 
                    $('.slide:eq(' + indx + ')').fadeIn();                              //Fadein next slide 
                } 

                timeoutId = setTimeout(slideImage, 2000);                               //Set Itmeout 
            }; 

            slideImage(0);                                                              //Start sliding 

            $('#prev').click(function()                                                 //When clicked on prev 
            { 
                slideImage(-1);                                                         //SlideImage with step = -1 
            }); 

            $('#next').click(function()                                                 //When clicked on next 
            { 
                slideImage(1);                                                          //SlideImage with step = 1 
            }); 

            $('#stop').click(function()                                                 //When clicked on Pause 
            { 
                clearTimeout(timeoutId);                                                //Clear timeout 

                $(this).hide();                                                         //Hide Pause and show Play 
                $('#play').show(); 
            }); 

            $('#play').click(function()                                                 //When clicked on Play 
            { 
                slideImage(0);                                                          //Start slide image 

                $(this).hide();                                                         //Hide Play and show Pause 
                $('#stop').show();     
            }); 
        }); 
    </script> 
</head> 

    <body> 
        <div id="cover"> 
            <div id="slides"> 
                <div class="slide first">1</div> 
                <div class="slide">2</div> 
                <div class="slide">3</div> 
                <div class="slide">4</div> 
            </div> 
        </div> 
    </body> 
</html>

中心DIV出现在IE的右侧

3 个答案: