jquery ui resizable bug解决方法 - Web前端

作者：98wpeu发布时间：2026-08-03分类：网页前端技术浏览：57

导读：但开启helper:'UI-resizable-helper'或Animate:true,时候,会发现官方的例子的宽度自动增加了10px仔细翻源代码一看,发现有以下问题...

但开启 helper: 'UI-resizable-helper' 或Animate: true, 时候,会发现官方的例子的宽度自动增加了10px 仔细翻源代码一看,发现有以下问题:(如图)

竟然用padding 难怪会自动添加宽度
这个问题在iefirefox下都存在.
其中这个问题比较难发现,但你可以用以下代码测试出来:
复制代码代码如下:
<style type="text/CSS">
#resizable { width: 350px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted #ddd; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
maxWidth: 350,#让最大宽度和最小宽度一致
minHeight: 150,
minWidth: 350,
helper: 'ui-resizable-helper'
});
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
test
</div>
</body>