Question

在IE 7和8中，每当我想编辑或向网格添加一行时，表格就会显示出来。表格和灰色背景显示在网格的顶部而不是在网格上方。我无法上传图片，但这是一张图表：

灰色区域

[jqGrid表格]

如果我向下滚动

，则不是灰色且可访问

我的网格

如果需要，我可以发布我的html / css / jq代码。在firefox中，功能很好，因为灰色区域超出网格，并且网格不可访问。这是IE漏洞吗？我使用的是jquery 1.7.1，jqGrid 4.3.1和jQuery ui 1.8.17。

<?php
session_start();
$user = $_SESSION['username'];
$uID = $_SESSION['UserID'];
$perms = $_SESSION['Access'];?><html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.17.custom.js" type="text/javascript"></script>
<script src="jquery.ui.datepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" />

<script>
    $(document).ready(function () {
    var lastsel3;
    var uID = <?php echo $uID; ?>;
    $grid = $("#tasks"),
        initDateEdit = function (elem) {
            setTimeout(function() {
                $(elem).datepicker({
                    dateFormat: 'dd-mm-yy',
                    showButtonPanel: true
                });
            }, 100);
            },
        initDateSearch = function (elem) {
            setTimeout(function() {
                $(elem).datepicker({
                    dateFormat: 'dd-mm-yy',
                    showButtonPanel: true
                });
            }, 100);
            },
        editSettings = {
                //recreateForm:true,
                jqModal:true,
                reloadAfterSubmit:true,
                closeOnEscape:true,
                savekey: [true,13],
                closeAfterEdit:true
            };
    $grid.jqGrid({
        datatype: "local",
        url: 'register.php',
        sortname: 'Job ID',
        sortOrder: 'asc',
        postData: {uID:uID},
        colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
        colModel: [ 
            {name: "track",  index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
            {name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
            {name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
            {name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
        ],

        onSelectRow: function(track){
                        if(track && track!==lastsel3)
                            {   
                                $('#tasks').jqGrid('restoreRow',lastsel3); 
                                $("#tasks").jqGrid('editGridRow',track,editSettings);
                                lastsel3=track; 
                            }
                        else{
                            $("#tasks").jqGrid('editGridRow',track,editSettings);
                        }
                        },
        editurl: 'editRow.php',
        rowNum: 10,
        shrinkToFit: true,
        rowList: [10,20,50],
        viewRecords: true,
        xmlReader: {
            root: "tasks",
            row: "task",
            repeatitems: false
        },
        pager: $('#navTasks'),
        onInitializeForm : function () {

        },
        caption: "Your Tasks"
    }).navGrid('#navTasks',{<?php
        if ($user==NULL){
            echo 'edit:false,add:false,del:false';
        }
        else{
            echo 'edit:false,add:false,del:false';
        }
    ?>},{},{},{},{multipleSearch: false, multipleGroup: false});
    $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
    setInterval(
        function(){
            $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
        },100000);
    $(window).bind('resize', function() {
        $("#tasks").setGridWidth($(window).width()-"142");
        $("#tasks").setGridHeight($(window).height()-"215");
    }).trigger('resize');


});
</script>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
    <tr >
        <td colspan="100%">
    <DIV id="header" class="header">
        <div class="title" align="center">Welcome to Research Division - Work Flow System<br /><span>Your Tasks</span></div>

        <?php 
            if($user == NULL){
                echo '<div align="center"><br/> Please Sign-in <a href="http://127.0.0.1">here</a></div>';
            }
            else {
                echo '<div align="center">Welcome '.$user.'!</div>';
            }
        ?>
    </DIV>
        </td>
    </tr>
    <tr >
        <td class="height">
    <div class="sidebar">
        <p><a href="assign.php">Assign Tasks</a></p>
        <p><a href="completed.php">Completed Tasks</a></p>
        <p><a id="logout" href="logout.php">Sign Out</a></p>
    </div>
        </td>
        <td>
    <DIV class="tables" align="center" >
        <table id="tasks"></table>
        <div id="navTasks"></div>
    </DIV>
        </td>
    </tr>
</table>
</body>

和CSS：

tr,td {
margin: 0;
padding: 0;
border: 0; 
outline: 0;
font-size: 100%;
background: transparent; }.tables{

min-width: 400px;}.header{
height: 100px;
width: 100%;
min-width: 500px;
background-color: #3E97D1;
border: solid 1px #681A38;
border-left: none;}.title{
font-size: 25px;}table{
border-collapse: collapse;
border: none;
padding: 0;
margin: 0px;
border-spacing: 0px;
width: 99%;
outline: 0;
height: 100%;}.height {
height: 99%;}.sidebar{
background-color: #009B95;
padding: 2px;
text-align: left;
border-right: solid 1px #681A38;
border-bottom: solid 1px #681A38;
width: 120px;
height: 99%;}

Answer 1

我认为您描述的问题的原因是您不在<!DOCTYPE html ...之前使用<html>。没有行网页浏览器在quirks mode中工作。您应该使用与您使用的HTML / XHTML方言相对应的doctype。因为在您的代码中找到<br />，我认为您应该包含

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在<html>之前

。从jqGrid文档中查看the example。

在编辑/添加时，IE 7-8中的jqGrid会在内容之上创建灰色区域

1 个答案: