0

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

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

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

我怎样才能解决这个问题？谢谢。

4

2 回答 2

1

这个确切的问题可以通过将box-sizing窗格的 CSS 属性设置为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);
    }

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

于 2012-12-04T14:23:07.370 回答
0

其他解决方案：将 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。

于 2015-01-04T16:42:09.713 回答