使用嚴格的DOCTyPE定義時jQuery可拖動擴展

好吧我有一個可拖動的div＃reportBox_1。當我拖動這個div時，它的寬度增加到原始寬度的3倍左右。現在這個＃reportBox_1的寬度爲29％，但看起來擴展是從#wrapper風格的兩個層次繼承的。使用嚴格的DOCTyPE定義時jQuery可拖動擴展

這實際上是一個更大的頁面的一部分，但爲了縮小問題的範圍，我注意到只有當我有嚴格的DOCTYPE定義時纔會出現此問題。以下是我使用的相同的代碼。如果我刪除了DOCTYPE定義，則解決了拖動寬度問題。

現在我想保持這種嚴格的DOCTYPE定義，因爲它消除因某種原因使用樣式「邊界半徑」時，IE9將不再顯示我的圓的邊界，但我想這是另外一個問題。

現在這個可拖動的寬度擴展問題出現在IE8和IE9中。有人可以幫助這個。我是jQuery的新手。以下是我的代碼：

更新：當我將整個頁面恢復正常並刪除DOCTYPE定義時，問題仍然存在。然後我刪除了定義標籤，現在它已經工作。以下是我正在使用的元定義。

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

不知道爲什麼這會導致jQuery的問題可拖動，但似乎是DOCTYPE，並且正在導致問題meta標籤兩者的結合。

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

來源

2012-07-27 Marquinio

父DIV是百分比寬度，如30％。我只是將寬度更改爲像素。不確定我的DIV設計是否搞亂了，但將其設置爲固定大小解決了問題。我想現在這對我來說很有用...... DOCTYPE和meta標籤沒有改變。

來源

2012-08-03 19:47:19 Marquinio

使用嚴格的DOCTyPE定義時jQuery可拖動擴展

回答

相關問題