Question

我在页面脚本中写了一点，通过jQuery重新定位一个包含子导航的小方框。

虽然它适用于所有（半）现代浏览器，但它在IE 7及更低版本中不起作用，尽管其他jQuery Code也可以。对于IE 6和7 任何人都可以告诉我，IE在这段代码中不喜欢什么？

<script type="text/javascript">
/* <![CDATA[ */
        $(document).ready(function(){ 
            //
           $('#subnavigation_portlet').css({padding: '0', margin:'0', width:200})
           $("#mainheader").prepend("<div style=\"clear: none; float:left; width:"+$('#subnavigation_portlet').width()+"px;\">&nbsp;</div>");
           $(".indentation").css({width:$('#subnavigation_portlet').width(), height:$('#subnavigation_portlet').height()});


           $('#subnavigation_portlet').css({position: 'absolute', zIndex:100, top:260, left:30});

           h=$('#subnavigation_portlet').position().top+$('#subnavigation_portlet').height()-$('.indentation').position().top;
           w=$('#subnavigation_portlet').position().left+$('#subnavigation_portlet').width()-$('.indentation').position().left;

       $('.indentation').css({height:h, width:w});

       p=$('#content_column').position();

           $('#content_column').css({position:'absolute',top:p.top, left:p.left+20, zIndex:10});

           $(".indentation").css({height:$('.indentation').height()+5});
        })
    /* ]]> */
    </script>

修改由于现在提供的提示都没有帮助，我创建了一个完整的示例页面，可在此处找到：http://dpaste.com/109791/。 jQuery触及的部分是蓝色的。

如果有人可以在IE 7中试用并报告bug，那就太棒了。直到明天，我才能在IE 7中测试它 - 在重要的演示之后：S

编辑2 为了能够在litmusapp.com上看到数学执行，我添加了这个：

jQuery('body').append('<div>'+jQuery('#subnavigation_portlet').position().top+'</div>');
       jQuery('body').append('<div>' +jQuery('#subnavigation_portlet').height()+'</div>');
       jQuery('body').append('<div> '+jQuery('.indentation').position().top+'</div>');
       jQuery('body').append('<div><br /></div>');
       jQuery('body').append('<div>'+ jQuery('#subnavigation_portlet').position().left+'</div>');
       jQuery('body').append('<div>'+jQuery('#subnavigation_portlet').width()+'</div>');
       jQuery('body').append('<div>'+jQuery('.indentation').position().left+'</div>');
       jQuery('body').append('<div><br /></div>');

       var h= jQuery('#subnavigation_portlet').position().top+jQuery('#subnavigation_portlet').height()-jQuery('.indentation').position().top;
       var w= jQuery('#subnavigation_portlet').position().left+jQuery('#subnavigation_portlet').width()-jQuery('.indentation').position().left;

       jQuery('body').append('<div>'+w+'</div>');
       jQuery('body').append('<div>'+h+'</div>');
       jQuery('body').append('<div><br /></div>');

       jQuery('.indentation').css({height:h, width:w});

       var p=jQuery('#content_column').position();

       jQuery('body').append('<div>'+p.top+'</div>');
       var l = p.left+20;
       jQuery('body').append('<div>'+p.left+'</div>');
       jQuery('body').append('<div><br /></div>');

令人惊讶：它有效，只有jQuery('#content_column').position();的返回值与其他浏览器完全不同

Answer 1

与其他浏览器不同，IE会破坏JavaScript上的错误执行。尝试启用错误报告，看看IE是否告诉您问题是什么......

Answer 2

您可能需要这样做：

jQuery.noConflict();

并使用“jQuery”而不是“$”，具体取决于项目中的其他Javascript依赖项。我不记得在IE上使用“$”时遇到的实际Javascript错误，但它非常具有异国情调。

Answer 3

很有可能它没有什么区别，但是你缺少整个document.ready函数的分号以及函数内部的第一行。你也将w，h和p泄漏到全局命名空间......

其中大部分可能不会在IE中引起任何特殊问题。我的猜测是其中一个数字由于某种原因没有回来。然后你正在做的数学会抛出一个错误，因为你不能用null或不是'number'变量做数学运算。尝试输出您的值并查看未填充的内容。这可能意味着您的一个选择器也已关闭。

Answer 4

在您链接到的页面的第300行，您有：

jQuery('.indentation').css({height:h, width:w});

但是此时w的值为-36，当您尝试将元素的宽度设置为-36px时，IE会抱怨。

在Firefox中，w此时的值为198。

不幸的是我没有时间进一步调试，但由于问题的根源似乎来自具有意外值的元素位置并弄乱了你的计算，我建议你看看你的CSS，因为这可能是负责定位。如果你可以在IE中始终如一地工作，那么这可能有助于解决问题。

IE＆lt; = 7.0不会执行jQuery代码

4 个答案: