javascript - 调整 slickgrid 列标题的大小会导致它与正文不对齐

Question

我正在使用带有 Bootstrap 3.1.0 css 的 SlickGrid 2.2。当我尝试调整列标题大小时，列标题单元格未与正文中的单元格对齐。无论我是收缩还是拉伸(stretch)， header 始终大于主体。我正在使用示例 1 中的代码:

html

<div id="myGrid" style="width:600px;height:500px;">

JavaScript

 var grid;
 var columns = [{
     id: "title",
     name: "Title",
     field: "title"
 }];

 var options = {
     enableCellNavigation: true,
     enableColumnReorder: false
 };

 $(function () {
     var data = [];
         data[0] = {
             title: "Task ",
             duration: "5 days",
             percentComplete: Math.round(Math.random() * 100),
             start: "01/01/2009",
             finish: "01/05/2009",
             effortDriven: 10
         };

     grid = new Slick.Grid("#myGrid", data, columns, options);
 })

http://jsfiddle.net/stryecho/n58Cq/7/

在 Bootstrap 2.3.2 中，调整大小似乎按预期工作。

我注意到 https://github.com/mleibman/SlickGrid/pull/699 上有一篇关于类似问题的帖子.那里似乎表明渲染问题已解决，但我相信我的情况(调整元素大小)仍然无法正常工作。

Answer 1

我通过将 slickgrid 的 div 放在带有 display:table 样式的 div 中来解决这个问题:

<div style="display:table;">
    <div id="grid1"></div>
</div>

但在我找到解决方案之前:对于 CSS:

[class^="slickgrid_"],
[class^="slickgrid_"] div {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
     box-sizing: content-box !important;
}

对于脚本 block :

grid1 = new Slick.Grid("#grid1", data, columns, options);

我还在代码末尾使用 for dependency:

grid1.autosizeColumns();

另外我发现这个问题是在我使用的时候

<center> <center> 

标签围绕着div