Html IE 7-8中的jqGrid在编辑/添加内容时在内容顶部而不是上方创建灰色区域
在IE7和IE8中，每当我想要编辑或向网格中添加一行时，表单就会显示出来。表格和灰色背景显示在网格顶部，而不是上方。我无法上传图片，但这里有一个图表：Html IE 7-8中的jqGrid在编辑/添加内容时在内容顶部而不是上方创建灰色区域,html,css,jqgrid,internet-explorer-7,Html,Css,Jqgrid,Internet Explorer 7,在IE7和IE8中，每当我想要编辑或向网格中添加一行时，表单就会显示出来。表格和灰色背景显示在网格顶部，而不是上方。我无法上传图片，但这里有一个图表： 灰色地带 [jqGrid表格] 如果向下滚动，则不是灰色且可访问 我的网格 如果需要，我可以发布我的html/css/jq代码。在firefox中，功能很好，因为灰色区域位于网格上方，网格无法访问。 这是一个IE bug吗？ 我使用的是jQuery1.7.1、jQGrid4.3.1和jQueryUI1.8.17 <?php sessi
灰色地带 [jqGrid表格]
如果向下滚动，则不是灰色且可访问 我的网格
如果需要，我可以发布我的html/css/jq代码。在firefox中，功能很好，因为灰色区域位于网格上方，网格无法访问。 这是一个IE bug吗？ 我使用的是jQuery1.7.1、jQGrid4.3.1和jQueryUI1.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>
我想您所描述的问题的原因是您没有使用并且
我想您的程序中有bug。你应该发布完整的HTML、JavaScript代码，这些代码可以用来重现问题。你最好在修改答案后写简短的评论，其中包括@Oleg（详情请参阅）。这样的评论会通知我的。对于这么简单的事情，我花了一整天的时间在谷歌上搜索和设计。再次感谢@Oleg！
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%;}