我正在使用此doctype(DOCTYPE html PUBLIC“ - // W3C // Dtd html 4.0 transitional // EN”)和下面的CSS来冻结ASP.NET gridview中的前4列和标题行(方式“冻结窗格”适用于Excel)。它适用于所有用户专用的IE8。问题是这个doctype会导致在IE8上不显示jquery模式对话框。屏幕让人想起,但对话框没有显示。 (该页面没有任何其他可能干扰对话框的CSS)
.Freezing
{
position:relative ;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
}
.FreezingCol
{
z-index: 1;
left: expression(
document.getElementById("freezingDiv").scrollLeft);
position: relative;
}
现在,当我将doctype更改为strict或者甚至是(DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Transitional // EN”“http://www.w3.org/TR/html4/loose.dtd “>”,jquery对话框可以工作,但是列冻结在IE8中停止工作。
仅供参考,该对话框适用于其他浏览器。
在对话框定义中添加下面的代码会使对话框显示在灰色区域结束后显示在页面底部(而不是屏幕),这是不好的。它应该出现在屏幕的中央。
open: function(event, ui) {
$(this).parent().css('position', 'fixed'); //d
}
我知道doctype transitional = quirks模式,但是需要在IE中使用它来进行列和标题冻结。我猜我可以在jquery-ui.css的对话框部分进行一些更改,以使其适用于doctype过渡模式。我不是CSS的专家。我已经尝试过的东西是删除“溢出:隐藏;”并指定“height:300px;”在.ui-dialog-content中。没有帮助,但我愿意再次与其他东西一起尝试。
TIA向所有专家发表。
* jQuery UI Dialog 1.8.24
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Dialog#theming
*/
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }