jQuery UI 布局调整大小错误答案

【问题标题】：jQuery UI Layout resizer bugjQuery UI 布局调整大小错误
【发布时间】：2012-06-26 11:48:19
【问题描述】：

我正在尝试使用 jQuery UI 布局插件。当我打开简单的演示 (http://layout.jquery-dev.net/demos/simple.html ) 来自开发者的网站，它看起来很完美。但是，如果我从本地 Web 服务器运行此演示（以及任何其他布局演示），则会显示一些不必要的元素。

screenshot （我是新手，所以我不能在那里发布图片）

我在 Firebug 中浏览了这个页面，发现它是面板调整大小 (class="ui-layout-resizer")，显示在错误的位置。

我该如何解决这个问题？谢谢。

【问题讨论】：

标签： javascript jquery layout user-interface

【解决方案1】：

可以通过将窗格的 CSS 属性 box-sizing 设置为 content-box 以外的任何值来复制这个确切的问题。

这个问题似乎出现在最新的候选版本 (1.3.0 – RC30.75) 中。在不了解有关您的情况的更多详细信息的情况下，我不知道这是否会影响您，但是，这里有针对此特定问题的解决方案。

将 cssWidth 函数（RC30.75 中的第 448 行未缩小，但这可能会改变。注意方法名称前面的逗号）如下：

cssWidth: function ($E, outerWidth) {
        // a 'calculated' outerHeight can be passed so borders 
        // and/or padding are removed if needed
        if (outerWidth <= 0) return 0;

        if (!$.layout.browser.boxModel) return outerWidth;

        var b = $.layout.borderWidth
            ,   n = $.layout.cssNum
            ,   W = outerWidth

        // depending on the level of box-sizing used, strip 
        // padding and/or margins from the width
        var boxSizing = $E.css("box-sizing")

        if (boxSizing !== "border-box") {
            W = W - n($E, "paddingLeft")
                - n($E, "paddingRight");
            if (boxSizing !== "padding-box") {
                W = W - b($E, "Left")
                      - b($E, "Right");
            }
        }

        return max(0,W);
    }

我已将此修改提交给那边的小组。如果我没有做傻事，而且这确实解决了他们满意的问题，那么希望这些更改最终会出现在产品中。

【讨论】：

【解决方案2】：

其他解决方案：将 box-sizing 设置为“content-box”。

关于更多细节，在 lib 的源代码中，它已在最新代码 1.4.1 中修复，但还有另一个错误导致该修复无效。

代码 v.1.4.1：

    var lb  = $.layout.browser
    ,   bs  = !lb.boxModel ? "border-box" : lb.boxSizing ? $E.css("boxSizing") : "content-box"
    ,   b   = $.layout.borderWidth
    ,   n   = $.layout.cssNum
    ,   W   = outerWidth
    ;
    // strip border and/or padding from outerWidth to get CSS Width
    if (bs !== "border-box")
        W -= (b($E, "Left") + b($E, "Right"));
    if (bs === "content-box")
        W -= (n($E, "paddingLeft") + n($E, "paddingRight"));

但是

bs = $s.boxSizing !== undefined ? $s.boxSizing : $s.boxSizingReliable

对于 chrome 来说 $s.boxSizingReliable() => false 总是错误的。

【讨论】：