调整内部内容大小时，字段集未调整大小 [英] Fieldset not resizing when inner content is resized
问题描述
<!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)的大小调整为大于字段集宽度的宽度，则字段集的宽度应增加，以便div包含在字段集的边界之内. />
当您执行上述代码并将IE8或IE9置于怪异模式时，您会注意到实现了所需的行为，该字段集的宽度增加并且div包含在该字段集中.
但是，当文档进入标准模式(即IE8标准模式或IE9标准模式)时，调整div的大小不会调整字段集的大小.该字段集保持原样，并且div移入和移出该字段集.
我无法理解为什么会发生这种情况，也不知道可能导致此问题发生的任何财产的可用性或不可用性.
我需要一个解决方案，使上述内容可以在IE7，IE8和IE9上运行.
任何帮助将不胜感激.
在此先感谢.
Attached above is the html code with a fieldset and a resizable div within the fieldset.
My user can resize the div to any width he wishes. In my real application I have other elements that resize. So this is just a relating demo.
In case my user resizes a control (in this case the div within the fieldset) to a width greater than the width of the fieldset, the width of the fieldset should increase so that the div is contained within the bounds of the fieldset.
When you execute the above code and put IE8 or IE9 in quirks mode, you will notice that the desired behaviour is achieved, the fieldset''s width increases and the div is contained within the fieldset.
However when the document goes into standard mode(i.e. IE8 standard mode or IE9 standard mode), resizing of the div does not resize the fieldset. The fieldset stays as it is and the div moves over and out of the fieldset.
I am unable to understand why this is occuring and am not aware of availablity or unavailability of any property that could cause this issue to occur.
I need a solution that would allow the above to work on IE7, IE8 and IE9.
Any help would be appreciated.
Thanks in Advance.
推荐答案
(文档).ready(功能(){
(document).ready(function () {
(" ).resizable(); }); < / 脚本 > < /head > < 正文 > < 字段集 =" fdemo" < div =" 可调整大小" 样式 宽度:100像素; height:100px;" class 框' > < /div > < /fieldset > < /body > < /html >
("#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)的大小调整为大于字段集宽度的宽度，则字段集的宽度应增加，以便div包含在字段集的边界之内. />
当您执行上述代码并将IE8或IE9置于怪异模式时，您会注意到实现了所需的行为，该字段集的宽度增加并且div包含在该字段集中.
但是，当文档进入标准模式(即IE8标准模式或IE9标准模式)时，调整div的大小不会调整字段集的大小.该字段集保持原样，并且div移入和移出该字段集.
我无法理解为什么会发生这种情况，也不知道可能导致此问题发生的任何财产的可用性或不可用性.
我需要一个解决方案，使上述内容可以在IE7，IE8和IE9上运行.
任何帮助将不胜感激.
在此先感谢.
Attached above is the html code with a fieldset and a resizable div within the fieldset.
My user can resize the div to any width he wishes. In my real application I have other elements that resize. So this is just a relating demo.
In case my user resizes a control (in this case the div within the fieldset) to a width greater than the width of the fieldset, the width of the fieldset should increase so that the div is contained within the bounds of the fieldset.
When you execute the above code and put IE8 or IE9 in quirks mode, you will notice that the desired behaviour is achieved, the fieldset''s width increases and the div is contained within the fieldset.
However when the document goes into standard mode(i.e. IE8 standard mode or IE9 standard mode), resizing of the div does not resize the fieldset. The fieldset stays as it is and the div moves over and out of the fieldset.
I am unable to understand why this is occuring and am not aware of availablity or unavailability of any property that could cause this issue to occur.
I need a solution that would allow the above to work on IE7, IE8 and IE9.
Any help would be appreciated.
Thanks in Advance.
这篇关于调整内部内容大小时，字段集未调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
