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/

要件ごとにIE9標準モードでテストします。

width : 50% !important;が特定のポイントを超えてサイズ変更されないようにしたことを指摘しましfieldsetた（これは理にかなっています）。幅は幅+パディング+境界線として計算されるため、幅は不均一に見えます。したがって、50％は実際には使用可能な領域の50％よりも大きくなります（IE 7でサポートされていないbox-sizingに設定されている場合を除く）。border-box

を削除width : 50% !important;すると、フィールドセットはボックスと一緒にサイズ変更されましたが、100％の幅で開始されます（ブロック要素であるため）。これは、望ましい動作ではないかと思います。

とにかく、フィールドセットがその内容とともに論理的にサイズ変更されない（またはサイズ変更されない）シナリオは見つかりませんでした。

fieldsetsの幅の制約を削除してフロートさせた例を次に示します。http： //jsfiddle.net/Rwdck/5/

fieldsetsこれは、期待どおりに流動的なレイアウトとサイズ変更を提供するため、目的の動作に近い場合があります。IE 7/8/9標準でテストしましたが、サイズ変更は正しく機能します。IE7のjQueryUIまたはJSFiddleスクリプトエラーに注意しました。

display: inline-blockこれは、http ：//jsfiddle.net/Rwdck/8/を使用する別の例です。

于 2012-05-11T06:23:59.577 に答える