IE10 兼容性 View 和 IE9 中的 jQuery 对话框小部件问题

Question

我将在我的帖子前声明我是一个全新的 jQuery 用户。我是一位经验丰富的程序员——1985 年开始在 IBM System/34 上编程。过去 5 年我一直在做 Web 开发——使用 IBM System i 作为 http 服务器；为 K-12 学校撰写申请(出勤、评分等)。

我爱上了 jQuery——它是我在编程世界中遇到的最接近诗歌的东西。但是，我还有很多东西要学习。

无论如何......我的问题。 (顺便说一句:我在 StackOverflow 网站和这个网站上都进行了广泛的搜索，但找不到对我遇到的问题的引用。)

首先...由于目前我不会解释的原因，我正在编写的应用程序必须在 Internet Explorer 中运行(并且仅限 IE)。

我刚刚实现了一个 jQuery UI 模式对话框，其中包含一个包含四个复选框的表单。该对话框在 IE10(和 Chrome)中运行良好。但是，在 IE10 兼容性 View 或 IE9 中，对话框标题栏和对话框定位无法正常工作。这是正在发生的事情的屏幕截图:

http://i278.photobucket.com/albums/kk110/schryver1960/IE9-jquery-problem.jpg

如您所见，对话框标题没有正确显示在对话框的“标题栏”内，标题栏的“X”也没有出现。此外，对话框应该在窗口中居中，但它似乎位于“左侧”、“顶部”。我已经尝试定义 position 属性，但它对对话框的位置没有任何影响——它总是将自己定位在窗口的左上角。

您在图像中看到的内容如下:“顶部”窗口是菜单栏(主页、菜单、事件等)的“标题”部分。顶部窗口定义了一个 iframe，其内部是应用程序窗口。应用程序窗口由“标题”(包括列标题在内的所有内容)和“页脚”(带有“重新开始”和“提交更改”按钮的栏)组成。 “子文件”行和列位于应用程序窗口中定义的 iframe 内。因此，回顾一下:带有 iframe 的顶部窗口；该 iframe 内的应用程序窗口，具有自己的 iframe；学生类(class)请求该 iframe 内的行。 (我希望这是有道理的。)

对话框的 div 在输出应用程序窗口(标题为“维护学生类(class)请求”)的页面上编码如下:

<div id="schOptions" class="ui-widget">
  <table width="270" border="0" cellpadding="2" cellspacing="0">
        <tr valign="middle">
              <td height="22" width="10">&nbsp;</td>
              <td width="220" class="stdLabel"</td>
              <td width="20" align="center"><input name="PFILL" type="checkbox" id="PFILL" value="Y"></td>
              <td width="10">&nbsp;</td>
        </tr>
        <tr valign="middle">
              <td height="22">&nbsp;</td>
              <td class="stdLabel">Use Alternate Match Groups?</td>
              <td align="center"><input type="checkbox" name="PMGN" id="PMGN" value="Y"></td>
              <td>&nbsp;</td>
        </tr>
        <tr valign="middle">
              <td height="22">&nbsp;</td>
              <td class="stdLabel">Schedule Study Hall?</td>
              <td align="center"><input type="checkbox" name="PSTUDY" id="PSTUDY" value="Y"></td>
              <td>&nbsp;</td>
        </tr>
        <tr valign="middle">
              <td height="22">&nbsp;</td>
              <td class="stdLabel">Reset Previous Requests?</td>
              <td align="center"><input type="checkbox" name="PRESET" id="PRESET" value="Y"></td>
              <td>&nbsp;</td>
        </tr>
  </table>

这是初始化对话框的代码:

    <script type="text/javascript" language="javascript">
/*====================
 * jQuery Ready Shell
 *====================*/
$(document).ready(function() {



/*=====================================
 * Initialize Scheduler Options Dialog
 *=====================================*/
$('#schOptions').dialog({
       autoOpen: false,
       title: "Scheduler Options",
       modal: true, 
       buttons: [{
         text: "Cancel",
         click: function() { 
      // Close dialog
         $(this).dialog("close");
        } // End "click" event function
       }, // End "Cancel" button definition
       {
         text: "Process",
         click: function() {
      // Process scheduler
         processScheduler();
      // Close dialog
         $(this).dialog("close"); 
        } // End "click" event function
       }] // End "Process" button definition
  }); // End #schOptions dialog definition



}); // End Ready Shell

</script>

看起来非常简单明了。而且，正如我已经提到的，在 Chrome 和 IE10 中一切正常，但在 IE10 兼容性 View 中，也不在 IE9 中。不幸的是，我不能只告诉用户更新到 IE10。事实上，我们目前甚至不能使用 IE10，因为 IE10 给我们的应用程序带来了其他问题。因此，我们的大多数用户(在一天中的任何特定时刻都有数千人)实际上在兼容性 View 中使用 IE10。

有任何想法吗？

谢谢。

编辑添加:

这可能很重要，我上面没有提到:我正在通过 Google CDN 检索 .css 和 .js 库；暂时使用“Smoothness”主题(尽管不久我肯定会转向自定义主题)。这是该代码:

    <!-- jQuery Style Sheet (Theme: Smoothness) -->
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">

<!-- jQuery and jQuery-ui -->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

顺便说一句，对话框是由一个按钮打开的，它通过出现在窗口的左上角来覆盖。

以下是相关代码:

    <a name="RunScheduler" href="javascript: promptScheduler();" 
      class="buttonLink">Run Scheduler</a>

/*=================================================
 * promptScheduler -- Prompt for Scheduler Options
 *=================================================*/
function promptScheduler() {
      $("#schOptions").dialog("open");
} 

此外，背景窗口区域的模态对话框“阴影”效果以及对话框窗口的其他样式属性都不起作用。似乎没有正确应用整套样式类，包括对话框窗口定位属性。问题是为什么？似乎某些 .css 属性正在生效。

Answer 1

<!doctype html>

在页面开头添加以上行对我有用。