修复了在 IE 中定位广告的问题答案

【问题标题】：Fixed positioning an ad in IE修复了在 IE 中定位广告的问题
【发布时间】：2011-11-25 10:15:34
【问题描述】：

可以跳到编辑以获取最新的解释。

我似乎无法将通过document.write() 写入的广告设置到固定位置。它在 IE 之外的所有其他浏览器中都能正常工作，包括 IE9。

这里是一个例子：http://htinteractive.com/bottom_bar/demo.html

任何建议将不胜感激。我的想法不多了。

谢谢。

编辑：

我已将问题缩小到我遇到的以下 IE 问题。为了简化它...

<style type="text/css">
    #temp1
    {
        position:fixed; 
        bottom:0; 
        height:100px; 
        width:100px; 
        border:solid 2px red;
    }
</style>

<!--WORKS IN IE-->
<div id="temp1">
    <script type="text/javascript">
        document.write("<scr" + "ipt type=\"text/javascript\">\nif(typeof(cachebuster) == \"undefined\"){var cachebuster = Math.floor(Math.random()*10000000000)}\nif(typeof(dcopt) == \"undefined\"){var dcopt = \"dcopt=ist;\"} else {var dcopt = \"\"}\nif(typeof(tile) == \"undefined\"){var tile = 1} else {tile++}\ndocument.write('<scr'+'ipt src=\"http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?\"></scr'+'ipt>');\n</scr" + "ipt>");
    </script>
</div>


<!--FAILS TO FIX POSITION IN IE-->
<script type="text/javascript">
    document.write('<div id="temp1">');
    document.write("<scr" + "ipt type=\"text/javascript\">\nif(typeof(cachebuster) == \"undefined\"){var cachebuster = Math.floor(Math.random()*10000000000)}\nif(typeof(dcopt) == \"undefined\"){var dcopt = \"dcopt=ist;\"} else {var dcopt = \"\"}\nif(typeof(tile) == \"undefined\"){var tile = 1} else {tile++}\ndocument.write('<scr'+'ipt src=\"http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?\"></scr'+'ipt>');\n</scr" + "ipt>");
    document.write('</div>')
</script>

无论如何，我真的需要第二种方法来工作，我正在努力弄清楚如何做。

谢谢。

【问题讨论】：

IE9之前的IE根本不支持position: fixed。您必须使用 JavaScript 解决方案来伪造它。
这很奇怪...对我来说一直到 IE 7 都可以正常工作...？我真正的问题似乎是通过 document.write 将对象写入具有固定定位的元素。
真的吗？好吧，我当然可能是错的，尽管我几乎可以肯定它在 IE6 中不起作用（没有）。我会在一秒钟内尝试 7 个，因为如果它确实有效，它肯定会很整洁 :-)
IE6 确实打破了一切，我个人不再关心它，只是拍打这些坏男孩之一...ie6nomore.com
position:fixed 适用于 IE7 及更高版本。然而，最初的问题并没有具体说明他遇到的问题是哪个版本。

标签： javascript internet-explorer css

【解决方案1】：

如果您将关注放在页面顶部会发生什么

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

【讨论】：

【解决方案2】：

在编写带有“src”属性的脚本时，一些浏览器会在实际运行外部脚本之前解析以下内联代码。外部脚本的结果将写在 div 之外，因为内联代码创建了它，这在不久前的很多浏览器中都是如此。

没有简单的方法可以解决这个问题，要么将 div 放在 html 中，要么放在外部脚本中。

【讨论】：

【解决方案3】：

此资源可能会有所帮助

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/

您也可以使用特定于浏览器的hacks 或者您可以指定不同的文档：

<!--[if lte IE 9]>

【讨论】：

【解决方案4】：

也许 IE 需要在编写脚本元素之前结束 temp1 DIV：

<script type="text/javascript">
    document.write('<div id="temp1"><' + '/div>');
    document.write("<scr" + "ipt type=\"text/javascript\">\nif(typeof(cachebuster) == \"undefined\"){var cachebuster = Math.floor(Math.random()*10000000000)}\nif(typeof(dcopt) == \"undefined\"){var dcopt = \"dcopt=ist;\"} else {var dcopt = \"\"}\nif(typeof(tile) == \"undefined\"){var tile = 1} else {tile++}\ndocument.write('<scr'+'ipt src=\"http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?\"></scr'+'ipt>');\n</scr" + "ipt>");
</script>

编辑（回应您的评论）：

由于您希望广告脚本进入 div，您必须将 document.write 放在一边并以编程方式创建脚本，因此您只需调用 appendChild 将其放入 div：

<script type="text/javascript">
    document.write('<div id="temp1"><' + '/div>');
    if(typeof(cachebuster) == "undefined") {
        var cachebuster = Math.floor(Math.random() * 10000000000);
    }
    if(typeof(dcopt) == "undefined") {
        var dcopt = "dcopt=ist;";
    } else {
        var dcopt = "";
    }
    if(typeof(tile) == "undefined") {
        var tile = 1;
    } else {
        tile++;
    }    
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;"
        + dcopt 
        + ";tile=" + tile
        + ";sz=728x90;ord=" + cachebuster + "?";
    divTemp.appendChild(script);
</script>

请注意，我不能 100% 确定在重新格式化脚本时没有打错字，所有这些转义序列...

【讨论】：

这是默认情况下似乎表现出的行为。尽管我希望它不会。我希望在 temp1 div 中写出该脚本。
如果你使用 appendChild，你就不能再使用 document.write.. 广告通常会使用很多

【解决方案5】：

检查您的 HTML 是否具有 DTD 格式

【讨论】：

【解决方案6】：

脚本标签似乎没有像您预期的那样将广告嵌入到您的 DIV 中。根据 IE Developer 工具，广告在您的 DIV 之外，因此无法获得定位。

使用您的示例代码将 #temp1 更改为仅 A 将您的广告定位到您想要的位置。

问题在于您的广告没有收到样式。如果您可以选择让您的广告返回一个 ID，那么您可能会以此为基础创建您的样式，或者使用 DOM 操作来让您的广告出现在正确的位置。

更深层次的问题，让广告脚本在您的 DIV 中呈现其内容，我只是不确定。

更新：

我相信与 IE 的不同之处在于使用 SCRIPT 标签的方法。使用 src 属性从另一个位置加载脚本似乎会破坏节点树。

这里有一些证据：

http://jsfiddle.net/wuqVw/1/

http://jsfiddle.net/wuqVw/2/

在第一个示例中，您可以看到广告位于 DIV 内部，而在第二个示例中则位于下方。 IE 中可能有一些规则说具有 src 属性的 SCRIPT 标记属于 HEAD，因此它将它们放在您的 DIV 之外。

【讨论】：

【解决方案7】：

未经测试，但似乎应该可以工作：

<script>
(function(){
  var w = window,
    d = document,
    s = d.createElement('script'),
    div = d.createElement('div'),
    el = [].slice.call(d.getElementsByTagName('script'), -1),
    baseUrl = 'http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;';
  // end var block

  if(!("cachebuster" in w)){
    cachebuster = Math.floor(Math.random()*10000000000);
  }
  dcopt = "dcopt" in w ? "" : "dcopt=ist;";
  tile = "tile" in w ? tile+1 : 1;

  div.id = 'temp1';
  div.appendChild(s);
  el.parentNode.inserBefore(div, el);
  s.src = baseUrl + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?';

})();
</script>

【讨论】：

hmmm...尝试一下，但是，不断得到 el.parentNode 是未定义的...以防万一，将其包裹在几个 div 中，但同样的问题
通过...修复了该问题... el = document.getElementById('random')，但未定位固定元素的主要问题仍然存在...