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属性，但它对对话框的位置没有任何影响 - 它总是将自己定位在窗口的左上角。

您在图像中看到的内容如下：“顶部”窗口是菜单栏（Home，Menus，Active等）下的“标题”部分。顶部窗口定义了一个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库;暂时使用“平滑度”主题（虽然我很快就会转向自定义主题）。这是代码：

    <!-- 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

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

<!doctype html>

添加它并查看它是否有效。

IE10兼容性视图和IE9中的jQuery Dialog Widget问题

1 个答案: