JQuery UI大小调整句柄不正确

我创造了这把小提琴，它显示了我的问题

您可以看到，用于重新调整大小的小句柄并没有围绕div的内容。我可以手动设置大小，但这会很麻烦，因为我将添加/删除元素

像这样做

#field{
    height: 34px;
}

---

这不是我想要做的，把把手放在正确的位置。是否有一个设置可以使句柄显示在适当的位置？

关键是

#字段

div中的所有元素都是浮动的。这使其高度为

0

。请参阅文章，主要是“大崩溃”一章，了解为什么这种看似错误的行为实际上是必要的。该网站是CSS内容的好来源

解决这个问题的一种方法是所谓的“clearfix”。实现这一点的一种方法是使用

：在
伪元素之后：

#field:after {
    display: table;
    clear: both;
    content: "";
}

小提琴：

有关快速参考（以及浏览器支持的发展），请参见


使容器拉伸到预期高度的另一种方法是在关闭它之前添加一个新元素：
。这在原则上与伪元素的技术相同，但在古代浏览器中得到更好的支持（很抱歉，对我来说，执行
溢出：隐藏
如何？在第一次调整大小时，它似乎会将调整大小手柄从我的光标上移开。它看起来像是将所有内容粉碎在一起，然后执行正常的调整大小。你有这个问题吗？另外，溢出隐藏为什么会这样做？我的（不正确）对应该发生的事情的理解是，由于div没有高度，所有内容都将被隐藏。我在div中添加了以下CSS，它似乎解决了问题：
边框：1px纯黑；溢出：隐藏；填充底部：20px；宽度：100%；
（“边框”CSS只是为了更好地查看div。）您可以更改handle的图标