1

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

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

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

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

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

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

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

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

我们正在搜索这个问题已经大约一个月了。阅读文档，支持，以及IE10的问题，但无法真正找到真正的问题。

页面应显示如下：

在此处输入图像描述

目前页面显示如下：

在此处输入图像描述

4

1 回答 1

0

有趣的是，我在这个例子中做了一个非常小的部分，并发现了问题所在。

在 IE10 中，如果 a<iframe>中存在 a <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>

我通过放置 a<div>而不是 a尝试了同样的事情，<td>但行为是相同的。所以我猜IE10解释iframe的宽度高度属性的方式有问题。

于 2013-05-17T11:50:47.307 回答