jQuery-ui 的 resize 功能无法与 chrome 中的 flexbox 模型正确交互，但在 FF 和 IE 中成功

Posted 2023-03-06

【中文标题】jQuery-ui 的 resize 功能无法与 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

【发布时间】：2015-09-17 08:10:08

【问题描述】：

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

可以在以下 jsfiddle 示例中找到我如何尝试完成此操作：minimal working/failing example。如果您使用 FF 或 IE 的最新版本之一对此进行测试，您将看到它按预期工作。然而，在 Chrome 中，处理程序变得不可见。

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

谁能向我解释发生了什么或提示我解决这个问题的正确方向？

ps：This question 是我获得 hack 想法的地方

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 */

【问题讨论】：

您的 JS Fiddle 用于最小工作示例现在显然可以在最新的 Chrome 中使用。

【参考方案1】：

检查这个UPDATED Fiddle

我只是稍微改了一下

#container
    ...
    position:relative;


#handler
    ...
    position:absolute!important;

【参考方案2】：

其实你的问题很简单。这就是继承。

您可以将resizable 设置为：

height: inherit;

它有效。或者，您也可以将其设置为“100%”。

为什么会这样？我不确定；我的猜测是这与 flexbox 规范有关。我有点老派，我根本不喜欢 flexbox（尽管它很快就会成为标准，如果它还没有的话）。它的规格有点棘手。例如，它在 chrome 上的工作方式是 height 采用明确指定的父容器的百分比。

现在您在“容器”和“处理程序”上指定高度，但由于“处理程序”（“可调整大小”）的父级没有指定高度，它可能使用 100% 的默认 chrome 高度值这是“自动”。

这是我的猜测。至于为什么它不可见，您可以确定这是 chrome 上的 flexbox 设置中的高度/定位问题。

我在 chrome 和 firefox 上尝试过，似乎没问题 - 这是fiddle。