Html 调整内部内容大小时字段集不调整大小 .盒子 { 背景颜色：灰色； 宽度：300px； 高度：400px； 位置：相对位置； 填充顶部：50px； 填充底部：50px； 左侧填充：50px； 右边填充：50px； } 字段集 { 边框颜色：红色； 宽度：50%！重要； 填充顶部：50px； 填充底部：50px； 左侧填充：50px； 右边填充：50px； } $（文档）.ready（函数（）{ $（“#可调整大小”）.resizable（）； });
上面附加的是带有字段集和字段集中可调整大小的div的html代码 我的用户可以将div调整为他想要的任何宽度。在我的实际应用程序中，我有其他可以调整大小的元素。这只是一个相关的演示。 如果我的用户将控件（在本例中为字段集内的div）的大小调整为大于字段集宽度的宽度，则字段集的宽度应增加，以便div包含在字段集的边界内 当您执行上述代码并将IE8或IE9置于quirks模式时，您会注意到达到了所需的行为，字段集的宽度增加，div包含在字段集中 但是，当文档进入标准模式（即IE8标准模式或IE9标准模式）时，调整div的大小不会调整字段集的大小。字段集保持原样，div移动到字段集外 我无法理解为什么会发生这种情况，也不知道任何可能导致此问题发生的财产是否可用 我需要一个解决方案，使上述工作在IE7，IE8和IE9。 我知道这很可能是一个与css相关的问题，所以我想要一个可以在全球范围内应用的css解决方案 任何帮助都将不胜感激Html 调整内部内容大小时字段集不调整大小 .盒子 { 背景颜色：灰色； 宽度：300px； 高度：400px； 位置：相对位置； 填充顶部：50px； 填充底部：50px； 左侧填充：50px； 右边填充：50px； } 字段集 { 边框颜色：红色； 宽度：50%！重要； 填充顶部：50px； 填充底部：50px； 左侧填充：50px； 右边填充：50px； } $（文档）.ready（函数（）{ $（“#可调整大小”）.resizable（）； });,html,css,Html,Css,上面附加的是带有字段集和字段集中可调整大小的div的html代码 我的用户可以将div调整为他想要的任何宽度。在我的实际应用程序中，我有其他可以调整大小的元素。这只是一个相关的演示。 如果我的用户将控件（在本例中为字段集内的div）的大小调整为大于字段集宽度的宽度，则字段集的宽度应增加，以便div包含在字段集的边界内 当您执行上述代码并将IE8或IE9置于quirks模式时，您会注意到达到了所需的行为，字段集的宽度增加，div包含在字段集中 但是，当文档进入标准模式（即IE8标准模式或IE9标准
提前谢谢 我把一个JSFIDLE放在一起作为一个起点： 按照要求在IE 9标准模式下进行测试 我注意到宽度：50%！重要的使
字段集框大小设置为边框框
，IE 7不支持该设置）
当我删除宽度时：50%！重要的
，字段集随框一起调整大小，但它以100%宽度开始（因为它是块元素），我怀疑这是否是所需的行为
无论如何，我没有发现字段集不随内容一起逻辑调整大小（或不调整大小）的情况
下面是一个示例，我删除了字段集
上的宽度约束并将其浮动：
这可能更接近所需的行为，因为它提供了流畅的布局和字段集
按预期调整大小。我在IE7/8/9标准中进行了测试，大小调整工作正常。我注意到IE7中有一个jQueryUI或JSFIDLE脚本错误
这里是另一个使用display:inline block
-的示例，我删除了“width:50%！important”，并且在IE8中调整了字段集的大小。但是，它在IE9上仍然不起作用。我尝试设置float属性，但没有帮助。你能为我提供使它在IE9标准上工作的确切html/javascript/css代码吗？参见编辑：第二个在IE9标准中工作，第三个（刚刚添加）也工作。第一个可以在Chrome中正常工作，但不能在IE9中正常工作。
<!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>