jQuery ui's的调整大小功能无法与chrome中的flexbox模型正确交互，但在FF和IE中取得了成功

jQuery-ui's resize functionality fails to interact properly with the flexbox model in chrome but succeeds in FF and IE

本文关键字：但在 交互 模型 FF 成功 IE flexbox 中的 ui 调整 chrome      更新时间：2023-09-26

我制作了一个div，它被拆分为两列，中间有一个处理程序。用户可以向右或向左拖动此处理程序，列宽将相应地调整（一列将变宽，另一列将变得更小，总宽度将保持不变）。

我是如何做到这一点的，可以在下面的jsfiddle示例中找到：最小工作/失败示例。如果你用FF或IE的最新版本之一来测试这一点，你会发现它按预期工作。然而，在Chrome中，处理程序变得不可见。

我认为这可能与flexbox模型和jqueryui的调整大小功能（使用css定位技巧）之间的交互有关。为了克服这个问题，我发现了一些技巧（将位置设置为相对位置，将左侧位置设置为0）。我认为Chrome对这些黑客的反应与FF/IE不同。

有人能向我解释发生了什么吗，或者向我暗示解决这个问题的正确方向吗？

ps：这个问题是我从哪里得到的黑客的想法

HTML:

<div id="container">
    <div id ="left">left</div>
    <div id ="resizable">
        <div id="handler" class="ui-resizable-handle ui-resizable-w"></div>
        <div id="right">right</div>
    </div>
</div>

JavaScript:

$("#resizable").resizable({handles: {'w' : '#handler'}});

css：

#container{
    background-color: black; /* we are not supposed to see any black but we do in Chrome indicating that the handler of the resizable box is not visible(in IE and FF everything works as intended) */
    display: flex;
    flex-direction: row;  
    height: 100px;
}
#resizable{
    display: flex; /* a flex box itself so the right panel can take all space not taken by the handler */
    flex-direction: row;
    width: 50%;
    /* hack to ignore the absolute positioning done by jquery ui */
    left:0 !important;
    position:relative !important;
    /* removing this completely destroys the functionality in IE and FF */
}
#left{
    border-right: 1px solid yellow;
    background-color: darkred;
    flex : 1;
    text-align: center;
}
#right{
    border-left: 1px solid yellow;
    background-color: steelblue;
    flex : 1;
    text-align: center;
}
#handler{
    background-color: green;
    width:5px;
    /* hack to ignore the absolute positioning done by jquery ui */    
    position:relative!important;
    left:0px!important;
    /* removing these makes the handler visible in chrome but makes it not pixel perfectly positioned in FF and IE as can be derived from the yellow borders being invisible */
}

检查此更新的Fiddle

我只是把它改成下面的

#container{
    ...
    position:relative;
}
#handler{
    ...
    position:absolute!important;
}

实际上，您的问题很简单。这就是继承。

您可以将resizable设置为：

height: inherit;

它是有效的。或者，您也可以将其设置为"100%"。

为什么会发生这种情况？我不确定；我猜想这与flexbox规范有关。我有点老派，我一点也不喜欢flexbox（尽管如果它还没有成为标准的话，它很快就会成为标准）。它的规格有点棘手。例如，它在chrome上的工作方式是，高度取显式指定的父容器的百分比。

现在您可以在"container"answers"handler"上指定高度，但由于"handler（"resizable"）的父级没有指定高度，因此它可能使用100%的默认chrome高度值，即"auto"。

那是我的猜测。至于为什么它是不可见的，你可以肯定的是，这是一个问题的高度/定位在flexbox设置铬。

我在chrome和firefox上试过了，看起来很好——这是小提琴。

相关文章：