jquery prepend 在除 IE7 之外的所有浏览器中工作答案

【问题标题】：jquery prepend working in all borwsers except IE7jquery prepend 在除 IE7 之外的所有浏览器中工作
【发布时间】：2011-04-13 10:59:35
【问题描述】：

啊！到目前为止，我的网站（正在进行中）在我迄今为止测试过的所有浏览器（firefox、safari、chrome 和 IE8）中都运行良好，但在 IE7 中却没有（我不知道 IE6 或其他浏览器）......我'm not positive但我认为这个问题与在我的jQuery中使用prepend（）有关。主要问题是主菜单（应该显示在徽标左侧的蓝色水平栏中）以及右上角的搜索框，两者都使用 prepend 添加。 IE7 中还有其他问题，所以我不确定我是否认为它来自 jQuery，或者我当前的 CSS 混乱中是否有错字！

这是我用于主菜单的脚本，它在 IE7 中不起作用，但在其他浏览器中起作用 - 有人在这里看到问题吗？

<script type="text/javascript">
<!--
$(function() {

/* ************************************** */
/* main menu */
/* ************************************** */
$("#bannerAreaWrapper").prepend("<div id='MainMenu'><a id='neutralsBtn' class='MainMenuModule' href='/neutrals-overview/'>Neutrals</a> <span class='bullet'>•</span> <a id='practicesBtn' class='MainMenuModule' href='/practices/'>Practices</a> <span class='bullet'>•</span> <a id='locationsBtn' class='MainMenuModule' href='/locations/'>Locations</a></div>");

});
-->
</script>

这里是网站的链接：http://www.agencydr.squarespace.com 感谢您的帮助！

【问题讨论】：

您要做的第一件事是使用一个可用于 IE 的调试器（Script Debugger 可从 Microsoft 免费下载，我认为 Visual Studio 也有免费版本）和图找出prepend 是问题还是其他问题。
好的 - 我会试一试 - 我在验证器 (validator.w3.org/…) 中检查了它，但没有真正看到任何应该导致这些问题的东西。
我尝试查看您提供的链接，但页面抛出错误 document.getElementById("Map") is null - 第 355 行。
另外，当我使用 IE 开发人员工具检查源代码时，我可以看到我尝试添加的内容根本没有显示 - 但在其他浏览器中会显示。
在下面查看我的答案。去掉marginTop: -20,后面的逗号

标签： jquery internet-explorer prepend

【解决方案1】：

IE7 在您的网站中发现两个 javascript 错误：

Expected identifier, string or number line 139
$('#LocationsMapWrapper').hover(function() {
   $('#LocationsMapWrapper #MapImage').animate({
      width: 600,
      height: 375,
      marginLeft: 550,
      marginTop: -20,                <---- remove comma
   }, "slow", "easeOutQuad");
 }

 'document.getElementById(...)' is null or not an object line 355
Shadowbox.setup(document.getElementById('Map').getElementsByTagName('area'), {width : 450, height : 400});

【讨论】：

【解决方案2】：

当我通过 IE7 上的开发工具栏脚本控制台运行它时，您的 prepend 函数工作正常，尽管它在加载时不起作用。您在 IE8 上收到一个 js 错误，在 IE7 上收到两个错误。 IE7上的附加功能与此功能有关：

$('#LocationsMapWrapper').hover(function() {
   $('#LocationsMapWrapper #MapImage').animate({
      width: 600,
      height: 375,
      marginLeft: 550,
      marginTop: -20,
   }, "slow", "easeOutQuad");
 }

第 139 行

尝试删除它并查看导航在页面加载时是否按预期工作

编辑

砰，明白了。

尝试删除 'marginTop: -20,' 后的逗号最后一个元素不应该有这个，认为它会影响所有旧浏览器

【讨论】：

是的！就是这样 - 我删除了位置地图的全部内容，现在菜单和搜索框显示在 IE7 中！非常感谢！！我已经通过并删除了一些试图追踪类似内容的代码，但我显然错过了！
现在我只需要弄清楚地图脚本出了什么问题！
去掉marginTop: -20,后面的逗号就可以了，看我上面的回答