将 box-sizing 设置为使用 content-box 后，Slickgrid 单元格边框被剪裁答案

【问题标题】：Slickgrid cell borders are clipped after setting box-sizing to use content-box将 box-sizing 设置为使用 content-box 后，Slickgrid 单元格边框被剪裁
【发布时间】：2014-02-28 17:43:48
【问题描述】：

我正在使用 slickgrid 2.2 和 bootstrap 3.1.0。当我尝试在单元格周围设置边框时，当我设置 box-sizing: content-box.我似乎需要这种解决方法（基本上是为了解决列宽问题）的原因在这个问题的末尾进行了描述。下面是代码（以 slickgrid 的示例 1 为基础）：

css

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

.slick-row {
    border-right: 2px dotted #E56278 !important;
    border-bottom: 2px dotted #E56278 !important;
}

html

<table width="100%">
    <tr>
        <td valign="top" width="50%">
            <div id="myGrid" style="width:600px;height:500px;"></div>
        </td>
        <td valign="top">
             <h2>Demonstrates:</h2>

            <ul>
                <li>basic grid with minimal configuration</li>
            </ul>
        </td>
    </tr>
</table>

javascript

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

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

 $(function () {
     var data = [];
     for (i=0; i<2; i++){
         data[i] = {
             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/LckHm/2/

如您所见，第一个单元格应该有一个底部边框，但它被下面的那个剪掉了。

背景：

在上一个问题中，我试图找到问题的根源（我不需要明确设置 box-sizing，因为 slickgrid 似乎已经解决了这个问题）：

resizing a slickgrid column header causes it to be misaligned with body

理想情况下，我想知道 Slickgrid 是否已经修复，而我只是使用错了，但是，似乎我可能需要辞职来设置 box-sizing:content-box，它现在带来我回答上面的问题。

【问题讨论】：

标签： javascript html css twitter-bootstrap slickgrid

【解决方案1】：

问题是由于您的单元格/行高度。因为您现在使用的是content-box，所以行高是25px 不计算底部边框。行高实际上是27px 计算底部边框（并且 slick 绝对将下一行定位在 25px 下方......），因此您需要强制 slick 将单元格/行高度限制为 23px + 2px 底部边框。

【讨论】：

是的，我希望避免重写 slickgrid css。但是现在手动设置 slick-row 和 slick-cell 类确实可以解决问题。

【解决方案2】：

就我而言，我正在使用带有 slick.autocolumnsize 插件的 Slickgrid。如果您想避免在 Firefox 中错位，只需将 slick.grid.js 中的 measureCellPaddingAndBorder() 函数替换为此。

我在这里找到了答案：https://github.com/mleibman/SlickGrid/pull/699，但由于同时兼容 Google Chrome 和 Firefox，我修改了 if 语句。您不必修改 SlickGrid 的 css。

 function measureCellPaddingAndBorder() {
        var el;
        var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
        var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];

        el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
        headerColumnWidthDiff = headerColumnHeightDiff = 0;
        if (el.css("box-sizing") != "content-box" && el.css("-moz-box-sizing") != "content-box" && el.css("-webkit-box-sizing") != "border-box") {
            $.each(h, function(n, val) {
                headerColumnWidthDiff += parseFloat(el.css(val)) || 0;
            });
            $.each(v, function(n, val) {
                headerColumnHeightDiff += parseFloat(el.css(val)) || 0;
            });
        }
        el.remove();

        var r = $("<div class='slick-row' />").appendTo($canvas);
        el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
        cellWidthDiff = cellHeightDiff = 0;
        if (el.css("box-sizing") != "content-box" && el.css("-moz-box-sizing") != "content-box" && el.css("-webkit-box-sizing") != "border-box") {
            $.each(h, function(n, val) {
                cellWidthDiff += parseFloat(el.css(val)) || 0;
            });
            $.each(v, function(n, val) {
                cellHeightDiff += parseFloat(el.css(val)) || 0;
            });
        }
        r.remove();

        absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
    }

【讨论】：