4 
<!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 置于 quirks 模式时，您会注意到实现了所需的行为，字段集的宽度增加并且 div 包含在字段集中。

但是，当文档进入标准模式（即 IE8 标准模式或 IE9 标准模式）时，调整 div 的大小不会调整字段集的大小。字段集保持原样，div 移出和移出字段集。

我无法理解为什么会发生这种情况，并且不知道可能导致此问题发生的任何财产的可用性或不可用性。

我需要一个解决方案，允许上述内容在 IE7、IE8 和 IE9 上运行。我知道这很可能是与 css 相关的问题，所以我想要一个可以在全球范围内应用的 css 解决方案。

任何帮助，将不胜感激。

提前致谢。

4

1 回答 1

0

我整理了一个 jsfiddle 作为起点：http: //jsfiddle.net/Rwdck/1/

根据要求在 IE 9 标准模式下进行测试。

我注意到这可以width : 50% !important;防止fieldset调整大小超出某个点（这是有道理的）。宽度看起来不均匀，因为宽度计算为宽度 + 填充 + 边框，所以 50% 实际上大于可用区域的 50%（除非box-sizing设置为border-box，这在 IE 7 中不受支持）。

当我删除width : 50% !important;时，字段集与框一起调整大小，但它以 100% 宽度开始（因为它是块元素），我怀疑这是所需的行为。

无论如何，我没有发现字段集没有在逻辑上调整大小（或不调整大小）及其内容的情况。

这是一个示例，其中我删除了宽度限制fieldsets并将它们浮动：http: //jsfiddle.net/Rwdck/5/

这可能更接近所需的行为，因为它提供了流畅的布局和fieldsets您所期望的调整大小。我在 IE 7/8/9 标准中进行了测试，并且调整大小工作正常。我确实注意到 IE 7 中的 jQuery UI 或 JSFiddle 脚本错误。

这是另一个使用的示例display: inline-block- http://jsfiddle.net/Rwdck/8/

于 2012-05-11T06:23:59.577 回答