Safari在Jquery脚本中没有正确计算宽度

就在我认为这个脚本终于工作得非常好的时候。唉...Safari在Jquery脚本中没有正确计算宽度

我有两个问题，我敢肯定有关系。首先，当页面最初在Safari中加载时，图像在一个垂直行中，当它们应该在水平行中浮动时。单击缩略图后，此问题消失。

的第二个问题是，当点击缩略图时，内容区域不能向外膨胀到它的适当的宽度，这是内容区域其宽度的+ 75％的当前宽度一次。当单击第二个缩略图时，此问题消失。在Firefox和IE8中可以看到正确的内容区域扩展行为。

发生此问题上依赖于扩展脚本两页。相关页面/脚本如下。

<script> 
    $(document).ready(function() { 
     $('#back').hide(); 
     $('#full-wrap').hide(); 
     $('#thumb-wrap a').children().not('img').hide();//hide image captions 

     var moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div 

     $('#thumb-wrap a').click(function(){ 

      var $big = $(this).index(); //get 0-based index of the thumb that was just clicked 
      $('#ajax-content > h1').hide();//hide the page title 
      $('#thumb-wrap').hide(); //hide the thumbnails 
      $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<div class="article"/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article 
      $('#back').fadeIn(500); //make the back button appear 

      $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb 
      $('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail 

      $('#content').animate({'maxWidth': '+=' + moveIt * 0.5 + 'px', 'left': '6%'}, 'slow'); 
      $('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * 0.75 + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap. 

     }); 

     $('#back').click(function(){ 
      $(this).fadeOut();//hide the back button 
      $('.article').remove();//remove the article div 
      $('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div 
      $('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400); 
      $('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails 
      $('#ajax-content > h1').delay(500).fadeIn(100);//show the page title 

     }); 

    }); 
</script>

Page 2

$(document).ready(function() { 
          moveIt = $('#content').outerWidth(); 
         $('#content').delegate('a', 'click', function(e) { 

          var currl = $('#content').offset(); 

          if(currl.left > 300){ 
           $('#content').animate({'maxWidth': '+=' + moveIt/2 + 'px', 'left': '6%'}, 'slow');       
          } 
          else{ 
           $('#content').animate({'maxWidth': '-=' + moveIt/2 + 'px', 'left' : '43%'}, 400); 
          } 
         e.preventDefault(); //Hyperlink won't load page link. 
         }); 
    });

通常Safari浏览器的渲染只要Firefox是快乐的罚款。我错过了什么？任何帮助，将不胜感激。这个项目在两个小时内到期，所以我在故障排除时接线。

来源

2011-03-25 qp2wd

我觉得我经历过这样的问题面前，它与Safari浏览器发射的文档准备事件早于其他浏览器..你的脚本开始时你的图像可能不会被加载，所以计算宽度和做高度不起作用。尝试使用jQuery（窗口）.load（）而不是jQuery的（文件）。就绪（）

在这里看到：http://36flavours.com/2010/01/jquery-document-ready-bug-in-safari-webkit/

来源

2011-03-25 18:30:51 skiplecariboo

也，在＃拇指包你的链接，你应该总是使用A HREF属性，甚至设置为“＃”，并且你应该使用float：left来使你的马赛克工作;） – skiplecariboo 2011-03-25 18:42:16

..我不知道缩略图如何在FF/IE中正确渲染而没有浮动。我猜＃thumb-wrap宽度足以将它们放入这些浏览器的行中，而不是在Safari中。那是固定的，但即使使用'$（window）.load（function（）'，动画仍然不起作用。初始扩展宽度是错误的。 – qp2wd 2011-03-25 18:50:23

Safari在Jquery脚本中没有正确计算宽度

回答

相关问题