Twitter bootstrap IE 11中初始页面加载时的jqgrid溢出面板

我在引导面板中使用了几个jqGrids。在chrome中效果非常好。在IE的初始页面加载（我使用的是11）中，jqGrids比面板宽，因此它们在右侧溢出。如果我刷新页面，一切正常。我在多个页面上有网格，这只发生在一个页面上。这一页的不同之处在于它有一个左侧（全高）菜单

我假设IE在第一次尝试时没有正确呈现“autowidth:true”

HTML:

---

我遇到了同样的问题，在包含元素上设置填充似乎是一个相当快的解决方法

我的Html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Work Sheet</h3>
    </div>
    <div id="gridContainer" class=panel-body>
        <table id="jqGrid">
        </table>
        <div id="jqGridPager">
        </div>
    </div>
</div>

---

不管出于什么原因，它似乎总是从右边流出。7px成功了。

您使用的jqGrid版本和jqGrid的分支（，商业版或旧版jqGrid，独立于您最终选择的jqGrid，我建议您验证免费jqGrid 4.13.2是否存在问题：编辑（临时）

和

用于加载jqGrid文件。您需要使用：

、

和注释

grid.locale en.js

或使用

我建议您验证免费jqGrid 4.13.2：编辑是否存在问题（临时）三行HTML代码，分别为

和

，用于加载jqGrid文件。这个问题是否也存在于免费jqGrid中，或者它是Guriddo 4.8.2中的一个错误？我在IE中使用了您提供的链接进行了尝试，但问题仍然存在。抱歉，我只能用免费jqGrid fork来帮助您。这是我从开始开发的替代fork将jqGrid重命名为Gurrido jqGrid JS并使其商业化（请参阅）。如果您有兴趣，您应该创建一个演示程序，该演示程序再现问题，并使用非最小化代码（

jquery.jqGrid.src.JS

）。我将分析问题并对其进行调试。

// Request Grid Operations
$("#request-grid").jqGrid({
    url: requestUrl,
    datatype: "json",
    colNames: ['Request Number', 'Approved?', 'Request Status', 'Employee Name', 'Requested By', 'Request Date'],
    colModel: [
            { name: "RequestId", key: true, sortable: true, search: true, sorttype: 'integer', searchoptions: { sopt: ['eq'] } },
            { name: "IsApproved" },
            { name: "RequestStatus" },
            { name: "EmployeeName", stype: "text", searchoptions: { sopt: ['eq', 'cn', 'bw'] } },
            { name: "RequesterEmail" },
            {
                name: "DateCreated", sortable: true, sorttype: 'date', formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: "m/d/Y" },
                search: false             
            }
    ],
    loadonce: true,
    height: '500',
    autowidth: true, 
    pager: "#request-pager",
    onSelectRow: function (id) {            
        $("#RequestNumber").val(id);
        $("#SelectedRequestModel").modal('show');
    }
});
$("#request-grid").jqGrid('navGrid', '#request-pager', { edit: false, add: false, del: false, search: true, view: false, refresh: true }, {},{},{}, { closeAfterSearch: true });


// Hardware Grid Operations
$("#hardware-grid").jqGrid({
    url: hardwareGridUrl,
    datatype: "json",
    colNames: ['HardwareId', 'Model', 'Type', 'Description', 'Price', 'Mobile Device?'],
    colModel: [
            { name: "HardwareId", key: true, hidden: true },
            { name: "Model", editable: true, editrules: { required: true } },
            { name: "ItemType", editable: true, editrules: { required: true } },
            { name: "ItemDescription", editable: true, edittype: 'textarea', editoptions: { rows: "5", cols: "25" }, width: 500 },
            { name: "Price", editable: true, formatter: 'currency', align: 'center' },
            { name: "IsMobile", editable: true, edittype: 'checkbox', editoptions: { value: 'true:false' }, editrules: { required: true } },
    ],
    loadonce: true,
    height: '300',
    autowidth: true,
    pager: "#hardware-pager",
    editurl: editHardwareUrl            
});

$("#hardware-grid").jqGrid('navGrid', '#hardware-pager', { edit: true, add: true, del: true, search: true, view: false, refresh: true },
        { 
            reloadAfterSubmit: true, closeOnEscape: true, closeAfterEdit: true,
            afterSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: 'json' });
                return true;
            }
        },
        {
            reloadAfterSubmit: true, closeOnEscape: true, closeAfterAdd: true,
            afterSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: 'json' });
                return [true, ""];
            }
        },
        {}
);

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Work Sheet</h3>
    </div>
    <div id="gridContainer" class=panel-body>
        <table id="jqGrid">
        </table>
        <div id="jqGridPager">
        </div>
    </div>
</div>