IE8忽略了jQuery UI'对话框'minHeight和height设置

时间:2010-12-23 14:35:24

标签: javascript jquery jquery-ui

我正在使用jQuery 1.4.4和jQueryUI 1.8.7来显示模态dialog框。我遇到一个问题,其中IE8呈现滚动条并且似乎忽略了我尝试过的所有许多不同组合中的minHeightheight选项。

在Chrome 8和Firefox 3.6中,我的对话框如下所示:

alt text

在IE 8中,它看起来像:

alt text

标记和脚本如下所示:

<a id="create" href="#">Create New Thing</a>
<div id="dlg-create-thing" title="Create new thing?">
  <form name="create-thing-form" id="dlg-create-thing-form">
    <p style="text-align:left">
    <span>Name: <input id="thingName" name="thingName" maxlength="12" size="30" /></span>
    <br /><br />
      <b>Thing options:</b><br /><br />
      <input type="radio" id="option1" name="theoptions" 
             value="0" checked="checked" />Use this option<br />
      <input type="radio" id="option1AndMem" name="theoptions" 
             value="1" />Use this other option
    </p> 
  </form>
</div>


<script type="text/javascript">
$(function () {
  $("#dlg-create-thing").dialog({
    autoOpen: false, resizable: false, width: 500, modal: true,
    minHeight: 280,  
    buttons: { 
      "Create": function () { /* do stuff */ },
      "Cancel": function () { /* do other stuff */}
    }
  });

  $("body").delegate("a[id='create']", "click",
    function () { 
        $("#dlg-create-thing").dialog('open');
      return false;
    }
  );

});
</script>

我该如何解决这个问题(最好是以一种不错的浏览器方式,但我会满足于什么)?

1 个答案:

答案 0 :(得分:3)

检查页面的Doctype,有时错误的doc类型会使Internet Explorer使用旧的渲染引擎,如IE7的或者进入兼容模式。您可以在此处阅读更多内容http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx