无法在 IE 10 中正确打开/显示我的 Web 应用程序答案

【问题标题】：Can't open/display my web application properly in IE 10无法在 IE 10 中正确打开/显示我的 Web 应用程序
【发布时间】：2013-04-22 21:02:16
【问题描述】：

我们有一个巨大的 HMI 和 SCADA 网络应用程序，它提供了几乎任何车间的数据收集设施，并提供了可视化和分析设施。

该产品基于三种技术。前端和服务器端使用 JavaScript、Java，数据库引擎使用 C++，通过 JNI 连接。

在前端，我们已经实际使用 HTML、CSS 和 JavaScript 来创建我们自己的窗口环境。每个窗口都是一个 iFrame，我们在其中动态加载一个小程序。因此，Web 应用程序在应用了所有窗口环境功能（如拖动、关闭、打开多个窗口等）的窗口环境中运行 HTML iframe 中的 Java 小程序代码

该产品在IE9及更早版本中运行完美。但是，一旦我们升级了 IE 10，我们就面临着严重的问题。有些与 IE10 不支持的 JavaScript 中的函数/属性有关。

我们主要在 IE10 中挖掘并修复了这些问题：

如果没有 JavaScript 中的 'this' 指针，许多方法将无法访问：我们添加了 'this' 指针来解决它
element.getAttribute ("style") 在 IE10 中不受支持。我们使用了替代的 document.style 来完成它

但是，在进行了这些小修复之后，我们忽略了所有 JavaScript/HTML 异常，但网页无法正常显示。我们咨询了 MSDN IE 10 兼容性手册和许多其他论坛，以了解如果网页不符合标准，则网页无法正确显示自身的可能性很高，因为 IE10 施加了严格的标准。

我们在所有 HTML 中添加了 doctype 和 metainf 标签，这样我们在 F12 开发者工具中的浏览器模式是 IE10，文档模式是 IE9 标准，但仍然没有改进。

我们在这个问题上搜索了大约一个月。阅读文档，支持，以及IE10的问题却找不到真正的问题。

页面应显示如下：

目前页面显示如下：

【问题讨论】：

我想这可能是很多事情，如果不能自己访问该站点，真的很难提供帮助。您使用的是什么文档类型？也可以尝试通过这个工具运行网站：validator.w3.org 和这个：jigsaw.w3.org/css-validator
控制台中是否有错误信息？您是否进行了诸如步进之类的基本调试？
@BillyMoat：以下是我正在使用的 doctype 和 meta inf：渡//EN" "w3.org/TR/html4/loose.dtd">
@RoToRa：根本没有错误消息。不是在 JS 中，也不是在 Java 中。 Web 应用程序部署在本地服务器上。
我的意思是 JS 控制台。难道不能单步执行JS代码，找到失败的地方吗？

标签： java javascript css internet-explorer-9 internet-explorer-10

【解决方案1】：

有趣的是，我在这个例子中做了一个很小的部分，然后发现了问题。

在 IE10 中，如果 <iframe> 存在于 <td> 中，则以百分比给出的 Iframe 的高度宽度属性不会过多关注其父级的高度宽度。

如下例所示，id 为“test”的 iFrame 采用高度宽度 = 100%。而它的父母的高度是1px。 当您在 IE10 中运行此程序时，框架的高度似乎非常大并显示异常行为

<HTML>
<HEAD>


</HEAD>
<BODY id="WESWinDesktop"  >
<table id=WESStructure width="100%" height="100%" border="2" cellpadding="0" cellspacing="0">
<tr>
    <td id="WESMainWinTitleBarCont" height="1px">       this is 'td' for iframe
            <iframe  id="test" src="" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
    </td>
  </tr>

  <tr>
    <td id="WESMainWinMenuBar" height="20">     menu bar
    </td>
  </tr>
  <tr>
    <td height="100%" >content

    </td>
  </tr>
  <tr>
    <td id="WESMainWinStatus" height="20">  status bar
    </td>
  </tr>
</table>

</BODY>
</HTML>

我尝试了同样的事情，将<div> 替换为<td>，但行为是相同的。所以我猜IE10解释iframe的宽度高度属性的方式有问题。

【讨论】：