0

ドラッグ可能なdiv＃reportBox_1があります。このdivをドラッグすると、幅が元の幅の約3倍になります。現在、この＃reportBox_1の幅は29％ですが、拡張は#wrapperスタイルから2レベル上から継承されているようです。

これは実際にははるかに大きなページの一部ですが、コードを切り詰めて問題を絞り込むと、この問題は厳密なDOCTYPE定義がある場合にのみ発生することに気付きました。以下は私が使用しているのと同じコードです。DOCTYPE定義を削除すると、ドラッグ幅の問題は解決されます。

何らかの理由で削除すると、スタイル「border-radius」を使用したときにIE9で丸い境界線が表示されなくなるため、この厳密なDOCTYPE定義を維持したいと思いますが、これは別の質問だと思います。

現在、このドラッグ可能な幅の拡張の問題は、IE8とIE9の両方で発生します。誰かがこれを手伝ってくれませんか。jQueryは初めてです。以下は私のコードです：

更新：ページ全体を通常の状態に戻し、DOCTYPE定義を削除しても、問題が引き続き発生していました。次に、定義タグを削除すると、機能するようになりました。以下は私が使用していたメタ定義です。

   <meta http-equiv="X-UA-Compatible" content="IE=edge" />

これがドラッグ可能なjQueryで問題を引き起こす理由はわかりませんが、問題を引き起こしているのはDOCTYPEとメタタグの両方の組み合わせのようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<style type="text/css">
body{
    height:800px;
    background-color: #CCCCCC;
    overflow: auto;
}

.mainWrapper{
    width: 1300px;
    height: 800px;
}  


.directoryContainer{
    width: 40%;
    height: 800px;
    background-color: #CCCC33;
    float: left;
} 


.preSelectedReportDisplayBox{
    float: left;
    height: 120px;
    width: 29%;
    background-image: url(picts/reports/report_display_box.jpg);
    text-align: center;
    margin-left: 21px;
    padding-top: 20px;
    border: 1px solid;
    border-color: #3399FF;
}



</style>  


<link type="text/css" href="scripts/jqueryui_1.8/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />  
<script type="text/javascript" src="scripts/jqueryui_1.8/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jqueryui_1.8/js/jquery-ui-1.8.21.custom.min.js"></script>


<script type="text/javascript">

    function initialize(){
        makeReportsDraggable(); 
    }   


    function makeReportsDraggable(){

            $('#reportBox_1').draggable({
                helper: 'clone'
            });

    }

</script>   

</head> 
<body onload="initialize()">

    <div id="wrapper" class="mainWrapper">
        <div id="directoryContainer" class="directoryContainer">



                    <div id="reportBox_1"  class="preSelectedReportDisplayBox">

                      Box1

                    </div>


        </div>              




    </div>

</body>
</html>
4

1 に答える 1

0

親DIVは、30％のようなパーセンテージ幅でした。幅をピクセルに変更するだけです。DIVデザインが台無しになっているかどうかはわかりませんが、固定サイズに設定すると問題が解決しました。これは今のところうまくいくと思います...DOCTYPEとメタタグのものは変更されていません。

于 2012-08-03T19:47:19.980 に答える