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大小绑定到其父级大小。

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

这3个意思是：

• 拥有父级的全宽
• 上边缘在y轴上与父项​​底边相邻5px
• 左边靠近{父母左边的0 x轴

将这3个放在一起，它总是会让父母调整大小，而且他们确实工作正好position是absolute