javascript - Firefox 中可调整大小的 div 宽度轮廓

Question

如果我在 div 上应用可调整大小的功能，轮廓位置会变得错误。

ui-resizable-handle-s(在演示中显示为灰色)扩展了轮廓(红色)，尽管它们的位置设置为绝对。

我该如何解决？该问题仅在 FF 中出现。

看看 demo .

Answer 1

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100 % ;
    bottom: -5px;
    left: 0;
}

此 css 规则将 ui-resizable-s 大小绑定(bind)到其父大小。

width:100%
bottom:-5px;
left:0;

这3个意思是:

• 拥有父级的全宽
• 上边缘在 y 轴上保持在父级下边缘 5px 的下方
• 左边缘保持在 0 x 轴上 parent 的左边缘

将这 3 个放在一起，它总是会在调整大小时让父级休假，而且它们确实有效，因为 position 是 absolute