Question

<!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>

上面附带的html代码包含字段集和字段集中可调整大小的div。

我的用户可以将div调整到他希望的任何宽度。在我的实际应用程序中，我有其他调整大小的元素。所以这只是一个相关的演示。如果我的用户将控件（在这种情况下是字段集中的div）的大小调整为宽度大于fieldset的宽度，则fieldset的宽度应该增加，以便div包含在fieldset的边界内。

当您执行上述代码并将IE8或IE9置于怪癖模式时，您会注意到实现了所需的行为，字段集的宽度增加且div包含在字段集中。

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

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

我需要一个允许上述工作在IE7，IE8和IE9上的解决方案。我知道这很可能是一个与css相关的问题，所以我想要一个可以全局应用的css解决方案。

任何帮助都将不胜感激。

先谢谢。

Answer 1

我把一个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/

的另一个示例

调整内部内容大小时，Fieldset不会调整大小

1 个答案: