以IE

为中心的DIV出现在右边在FF，CH等下面的代码工作正常，但不在IE中居中。它朝向屏幕的右侧。以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>

来源

2012-08-14 BentCoder

您是否尝试将幻灯片的边距更改为自动并删除0px。我认为这不会破坏任何东西，但应该解决问题？ – 2012-08-14 16:13:37

没有运气仍然同样的结果。 – BentCoder 2012-08-14 16:30:39

你想要居中哪个元素？ – 2012-08-14 18:04:57

幻灯片类具有绝对位置并正在将它移动到容器的外部。

地址：

#slides { 
    position:relative; 
}

（如已经建议），然后：

.slide { 
    left:0px; 
}

来源

2012-08-14 16:11:42 robbieAreBest

删除它时，下一个图像出现在当前图像的下方，因此两个图像同时出现。 – BentCoder 2012-08-14 16:29:17

@Mad Max为你更新它，你需要添加一个'left：0px'来让IE开心。 – robbieAreBest 2012-08-14 16:48:46

只是完美...感谢 – BentCoder 2012-08-15 07:27:45

添加这让你不得不为.slides

#slides { 
    position: relative; 
}

相对容器难道这就是你通缉？

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

来源

2012-08-14 16:14:33 xivo

仍然同样的结果。 – BentCoder 2012-08-14 16:27:18

哪个版本的IE？我在IE7中查看了我的代码，它看起来以我为中心。也许，我误解了？ – xivo 2012-08-14 16:31:08

试试这个代码。我觉得和@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>

来源

2012-08-14 16:34:33

或者以另一种方式绕过这个问题......尝试将所有的div放在屏幕上，并且使用不同的z-index来显示，然后改变你的javascript以将每个图像淡出为无可见性。然后将它们全部淡入到一起（最高Z指标将可见）并重复？不知道是否oyu可以淡出到0可见度虽然......从来没有尝试过 – 2012-08-14 16:43:45

回答

相关问题