Fieldset在調整內部內容時不會調整大小

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

上面附加的是帶fieldset和fieldset中可調整大小的div的html代碼。Fieldset在調整內部內容時不會調整大小

我的用戶可以根據自己的意願調整div的大小。在我的真實應用程序中，我調整了其他元素。所以這只是一個相關的演示。如果我的用戶調整一個控件（在本例中是字段集內的div）的大小，使其寬度大於字段集的寬度，字段集的寬度應該增加，以便div包含在字段集的範圍內。

當你執行上面的代碼並把IE8或IE9設置爲怪癖模式時，你會注意到達到了期望的行爲，fieldset的寬度增加了，div被包含在fieldset中。

但是，當文檔進入標準模式（即IE8標準模式或IE9標準模式）時，調整div的大小並不會調整字段集的大小。字段保持不變，div移動到字段集以外。

我無法理解爲什麼會出現這種情況，並且我沒有意識到可能導致此問題發生的任何財產的可用性或不可用性。

我需要一個解決方案，可以讓上述工作在IE7，IE8和IE9上。我知道這很可能是一個CSS相關的問題，所以我想要一個可以全局應用的CSS解決方案。

任何幫助，將不勝感激。

在此先感謝。

來源

2012-05-11 user1388656

我放在一起的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-11 06:23:59

我刪除了「寬：50％的重要」和字段集在IE8調整。但是，它仍然無法在IE9上運行。我嘗試設置浮動屬性，但它沒有幫助。你能否給我提供確切的html/javascript/css代碼，使它可以在你的IE9標準下工作。 – user1388656

查看編輯：第二個小提琴在IE 9標準中工作，第三個（剛剛添加）也可以。第一個在Chrome中正常工作，但不是IE9。 –

Fieldset在調整內部內容時不會調整大小

回答

相關問題