IE10 兼容性视图和 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 兼容性视图或 IE9 中，对话框标题栏和对话框定位无法正常工作。这是正在发生的事情的屏幕截图：

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

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

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

对话框的 div 在输出应用程序窗口（标题为“维护学生课程请求”）的页面上编码如下：

<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 兼容性视图中，也不在 IE9 中。不幸的是，我不能只告诉用户更新到 IE10。事实上，我们目前甚至不能使用 IE10，因为 IE10 给我们的应用程序带来了其他问题。因此，我们的大多数用户（在一天中的任何特定时刻都有数千人）实际上在兼容性视图中使用 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>

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

Answer 2

我知道这是一个老问题，但由于它没有答案而且我也遇到了同样的问题，所以我想我会添加我的解决方案。我确定 jqueryui 对话框在 IE 兼容模式下显示不正确，除非指定以下文档类型：

<!doctype html>

添加它，看看它是否有效。