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

Question

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

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

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

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

定义中心列的代码如下：

/* [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（浏览器模式）Quirks（doc模式）中的Internet Explorer不喜欢什么？

Answer 1

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

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

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

Answer 2

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

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

编辑： 我忘了提及，如果上述工作，但你仍然需要声明你的UTF-8编码，你可以使用元标记这样做 。

最后，如果上述方法不起作用，并且您确定兼容性视图不是您的问题（请检查'tools \\ compatibility view settings`），您可以尝试通过删除样式表并确认功能代码正常工作来进行调试。

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

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

Answer 3

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

Answer 4

如果您想要向后兼容和浏览器兼容，最简单的修复方法是将doctype设置为HTML5 <!DOCTYPE html> 。 所有主流浏览器都支持此功能，这会强制IE8进入标准模式，您可以在此处进行验证 。 我在IE8中扩展Event原型时遇到了一些困难，切换到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的建议 。 你能告诉我现在的标题是什么样的吗？ 我会尝试复制这个问题，因为我对此有点感兴趣：D

UPDATE2：

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

Answer 5

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

我检查浏览器的方法是：

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

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

   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-Mode呈现，我会在您开始在新浏览器中包含的CSS中修复IE5.5的渲染错误之前搜索触发它的内容并将其删除。

关于Quirks-Mode的更多细节： http ： //www.quirksmode.org/css/quirksmode.html

Answer 6

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

即在你的代码末尾，你没有附加DutyRota

Answer 7

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