この doctype (DOCTYPE html PUBLIC "-//W3C//Dtd html 4.0 transitional//EN") と以下の css を使用して、ASP.NET グリッドビューの最初の 4 列とヘッダー行をフリーズします (「ペインをフリーズする方法」)。 " は Excel で動作します)。すべてのユーザーが排他的に使用する IE8 で動作します。問題は、この doctype が原因で jquery モーダル ダイアログが IE8 に表示されないことです。画面は灰色ですが、ダイアログは表示されません。(このページには、ダイアログに干渉する可能性のある他の 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の専門家ではありません。私がすでに試したことは、「overflow: hidden;」を削除することです。「高さ: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; }