脚本工作取决于IE文档模式

时间：2012-05-14 16:45:58

标签： javascript internet-explorer cross-browser

我正在尝试在JavaScript中编写一个小部件（使用UWA语法）。它在FireFox中运行得非常好，但Internet Explorer正在......奇怪。

基本上，当我第一次加载小部件时，它不显示我的中心列（应该显示当天的Duty Rota）。

Default

但是，如果我按F12并进入开发者控制台，我可以将文档模式更改为IE9 standards并使其正常工作。

IE9 standards mode

如果我将文档模式设置为Quirks，则显示如下：

Quirks mode

定义中心列的代码如下：

/* [centre] Duty rota */
AllInOne.centreCol = function() {
    var now = new Date();
    var currentDay = now.getDay();

    var DRWeek1 = {
        Monday : {
            BeforeSchool : "HA, MJO, LS, GB, JSA, HA, TD",
            Breaks : "ABO, LL, RR, DR, PHd, JA, VID, AN, LDE, CN, DW, PG, MD, ND, CK, JP, RH, RJ, CC, GB",
            AfterSchool : "GB, CL, MVW, TD/GDO, HL, LS"
        },
        Tuesday : {
            BeforeSchool : "RJ, AN, AS, GB, JSA, SUW, MJO",
            Breaks : "DW, AB, RR, SDI, PHd, LL, ABO, ND, CG, CC, MD, PD, CT, RY, LDE, SC, RH, JR, RC, GB",
            AfterSchool : "GB, CL, MJO, TD/GDO, SUW, AS"
        },
        Wednesday : {
            BeforeSchool : "JP, JC, SM, GB, HSA, HA, CL",
            Breaks : "BW, JR, TG, SD, PHd, JM, SW, MVW, CG, AMO, MDA, KL, VID, CN, SDI, DST, VY, SLH, JH, GB",
            AfterSchool : "GB, MJO, CL, TD/GDO, HA, SM"
        },
        Thursday : {
            BeforeSchool : "SUW, HL, ST, GB, JSA, HL, CK",
            Breaks : "DR, VY, HL, CK, PHd, JC, DST, HS, SC, MDA, AH, PD, NB, AMO, HSM, DM, JOS, SLH, CK, GB",
            AfterSchool : "GB, JOR, JH, TD/GDO, HL, ST"
        },
        Friday : {
            BeforeSchool : "TG, SUW, JT, GB, JSA, JM, JP",
            Breaks : "SW, AB, HSM, HA, PHd, DM, JOS, CT, KL, BW, RY, PG, JA, NB, RC, HS, JOR, AH, GP, GB",
            AfterSchool : "GB, SWA, JM, TD/GDO, JP, JT"
        }
    }

    var DRHTML = '<h2>Duty Rota</h2>';

    switch ( currentDay ) {
        case 1:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Monday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Monday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Monday.AfterSchool + '</p>';
            break;
        case 2:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Tuesday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Tuesday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Tuesday.AfterSchool + '</p>';
            break;
        case 3:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Wednesday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Wednesday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Wednesday.AfterSchool + '</p>';
            break;
        case 4:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Thursday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Thursday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Thursday.AfterSchool + '</p>';
            break;
        case 5:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Friday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Friday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Friday.AfterSchool + '</p>';
            break;
        default:
            DRHTML += '<p>No school. Yay!</p>';
            break;
    }

    var DutyRota = widget.createElement( 'p', 
        { 'id' : 'DR', 'class' : 'DR' } );
    widget.body.getElementsByClassName('centre_col')[0].appendChild(DutyRota);
    widget.body.getElementsByClassName('DR')[0].setHTML(DRHTML);
}

该功能中是否存在Internet Explorer不喜欢的内容？

我非常困惑，任何帮助都会非常感激。

编辑：完整代码

可在此处找到：http://pastebin.com/n1qFeTnU

附加编辑：看起来Widget容器正在强制页面进入IE9怪癖模式。因此，这意味着我根本无法控制文档模式。

那么，问题仍然存在，我的代码是什么，IE9中的Internet Explorer（浏览器模式）Quirks（doc模式）不喜欢？

7 个答案:

答案 0 :(得分：8)

这是一个提示，不使用Quirks模式。它呈现为IE5.5，甚至比IE6更糟糕......

尝试将此标记添加到您的文件中：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

答案 1 :(得分：2)

首先，尝试删除DOCTYPE之前的xml字符串<?xml version="1.0" encoding="utf-8"?>。即使对于XHTML，也没有必要。在你的doctype之前有任何东西可以触发怪癖模式。 W3C schools表示XHTML文档类型也应该是文档的第一行。

我想运行你的代码，所以我可以自己尝试这个，但我不能，因为你的pastebin示例不包含实际的框架，因此脚本在到达未声明的“widget”变量时会中断。

编辑：我忘了提及，如果上述方法有效，但您仍然需要声明UTF-8编码，则可以use a meta tag to do so 。

最后，如果上述方法不起作用且您确定兼容性视图不是您的问题（请查看“工具\兼容性视图设置”），您可以尝试通过删除样式来调试表并确认功能代码正常工作。

我的猜测是你的小部件在那里，但是由于渲染效果不佳的CSS，某些浮动或z顺序或者显示设置被误解而隐藏。慢慢添加样式可能会帮助您缩小发生错误的事情，以便您可以解决它。

我注意到here，所有小部件都在IFRAMES中运行。在IE中，如果框架页面处于怪异模式，则IFRAMES将以怪异模式呈现。我不确定这是否相关，因为你说小部件本身就是强迫怪癖模式，但值得记住。

答案 2 :(得分：1)

要检查的第一件事是兼容性视图设置。例如，它可以设置为默认为IE7模式。

答案 3 :(得分：1)

如果您希望向后兼容和兼容浏览器，则最简单的修复方法是将doctype设置为HTML5 <!DOCTYPE html>。所有主流浏览器都支持这一点，这会迫使IE8进入标准模式，因为你可以verify here。我遇到了一些困难extending the Event prototype in IE8，切换到HTML5 doctype对我来说是个窍门。虽然，通常情况下，IE8不是增加dom对象的忠实粉丝，但这确实有效，没问题。不知道你可以强迫IE8使用这个忍者知识来做下一步：）

<强>更新

我看过你的pastebin，我只是想知道：你是否删除了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

和

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:frog="http://fdp.frogtrade.com/ns/">

线？用<!DOCTYPE html>替换它们？乍一看，这也是MS suggests。你能告诉我现在的标题是什么样的吗？我会尝试复制这个问题，因为我对此有点感兴趣：D

<强> UPDATE2：

正如jatrim指出的那样：就IE而言，小部件在iFrame中呈现。在这种情况下，如果父文档以怪异模式呈现，则将doctype设置为<!DOCTYPE html>将不会强制执行标准模式。也许您可以检查将父文档设置为<!DOCTYPE html>是否有效。

答案 4 :(得分：0)

我不认为IE在Whatever-Mode中显示您的页面非常重要。例如，如果IE9默认情况下没有在Quirks-Mode中呈现您的页面，那么为什么还要修复那里的bug呢？没有人（除了一些疯狂的人）只会因为他们可以强迫他们的IE进入默认情况下不使用的渲染模式。

检查浏览器的方法是：

  • 为每个IE版本http://www.microsoft.com/en-us/download/details.aspx?id=11575下载虚拟机​​或自行创建

  • 使用以下代码创建收藏夹作为网址：

    javascript:(function(){var%20vMode=document.documentMode;var%20rMode='IE5%20Quirks%20Mode';if(vMode==9){rMode='IE9%20Standards%20Mode';}else%20if(vMode==8){rMode='IE8%20Strict%20Mode';}else%20if(vMode==7){rMode='IE7%20Strict%20Mode';}alert('Rendering%20in:%20'+rMode+"\nId: "+vMode);})();
  • 点击收藏夹
    • 打开您的页面并执行上面的代码
  • 您现在会看到一个消息框，您可以在其中查看您的网页呈现的模式

请注意！此脚本只处理IE版本6-9。在IE10中，它可能会在每次以Quirks-Mode显示页面时显示。因此，我添加了您可以看到真实文档模式的ID：）

如果您的页面（默认情况下）以Quirks模式呈现，我会在您开始在CSS中修复IE5.5的渲染错误之前搜索触发它的内容并将其删除。 ; s包含在较新的浏览器中。

有关Quirks-Mode的更多详情：http://www.quirksmode.org/css/quirksmode.html

答案 5 :(得分：0)

由于getElementsByClassName仅在IE 9中引入，我猜猜怪怪模式不允许你使用它。

即。在代码末尾，您未能附加DutyRota

答案 6 :(得分：0)

如果是IFRAME，请注意，如果父页面处于IE9标准模式，则子页面只能处于此模式或“怪癖模式仿真”模式。要在IFRAME中获得真正的怪异模式，父页面必须处于IE8或更早的模式，在这种情况下，没有子页面可以处于IE9模式，仅在IE8或更早的模式中。

相关问题
最新问题