<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.box
{
background-color:Gray;
width:300px;
height:400px;
position:relative;
padding-top : 50px;
padding-bottom : 50px;
padding-left : 50px;
padding-right : 50px;
}
fieldset
{
border-color : Red;
width : 50% !important;
padding-top : 50px;
padding-bottom : 50px;
padding-left : 50px;
padding-right : 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#resizable").resizable();
});
</script>
</head>
<body>
<fieldset id="fdemo">
<div id="resizable" style="width: 100px; height: 100px;" class='box'></div>
</fieldset>
</body>
</html>
上面附上了带有字段集和字段集中可调整大小的 div 的 html 代码。
我的用户可以将 div 的大小调整为他希望的任何宽度。在我的实际应用程序中，我还有其他可以调整大小的元素。所以这只是一个相关的演示。 如果我的用户将控件(在本例中为字段集中的 div)调整为大于字段集宽度的宽度，则字段集的宽度应增加，以便 div 包含在字段集的范围内。
当您执行上述代码并将 IE8 或 IE9 置于怪癖模式时，您会注意到实现了预期的行为，字段集的宽度增加并且 div 包含在字段集中。
但是，当文档进入标准模式(即 IE8 标准模式或 IE9 标准模式)时，调整 div 的大小不会调整字段集的大小。字段集保持原样，div 移出字段集。
我无法理解为什么会发生这种情况，也不知道可能导致此问题发生的任何属性(property)的可用性或不可用性。
我需要一个可以让上述内容在 IE7、IE8 和 IE9 上运行的解决方案。 我知道这很可能是一个与 css 相关的问题，所以我想要一个可以全局应用的 css 解决方案。
如有任何帮助，我们将不胜感激。
提前致谢。
最佳答案
我整理了一个 jsfiddle 作为起点:http://jsfiddle.net/Rwdck/1/
根据要求在 IE 9 标准模式下进行测试。
我注意到 width : 50% !important; 防止 fieldset 调整大小超过某个点(这是有道理的)。宽度看起来不均匀是因为width的计算方式是width + padding + border，所以50%实际上大于可用区域的50%(除非box-sizing设置为border-box，IE 7 不支持)。
当我删除 width : 50% !important; 时，字段集随框一起调整大小，但它从 100% 宽度开始(因为它是 block 元素)，我怀疑这是所需的行为。
无论如何，我没有发现字段集未随其内容进行逻辑调整(或未调整大小)的情况。
这是一个示例，其中我删除了 fieldsets 上的宽度限制并将它们 float :http://jsfiddle.net/Rwdck/5/
这可能更接近于所需的行为，因为它提供了流畅的布局，并且 fieldsets 可以按照您的预期调整大小。我在 IE 7/8/9 标准中进行了测试，调整大小工作正常。我确实注意到 IE 7 中存在 jQuery UI 或 JSFiddle 脚本错误。
这是另一个使用 display: inline-block 的例子 - http://jsfiddle.net/Rwdck/8/
关于html - 调整内部内容大小时，字段集不调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10545993/