当使用严格的DOCTyPE定义时，jQuery可拖动性得到扩展

jQuery draggable getting expanded when using strict DOCTyPE definition

本文关键字：拖动 jQuery 扩展 定义 DOCTyPE      更新时间：2024-04-07

好的，我有一个可拖动的div#reportBox_1。当我拖动这个div时，它的宽度会增加到原来宽度的3倍。现在，这个#reportBox_1的宽度为29%，但扩展似乎是从两个级别上继承的，即#wrapper样式。

这实际上是一个大得多的页面的一部分，但我注意到，只有当我有严格的DOCTYPE定义时，才会出现这个问题。下面是我正在使用的相同代码。如果我删除DOCTYPE定义，拖动宽度问题就解决了。

现在我想保留这个严格的DOCTYPE定义，因为出于某种原因删除了它，IE9在使用"边界半径"样式时将不再显示我的圆形边界，但我想这是另一个问题。

现在，这种可拖动的宽度扩展问题同时出现在IE8和IE9中。有人能帮忙吗。我是jQuery的新手。以下是我的代码：

更新：当我将整个页面恢复正常并删除DOCTYPE定义时，问题仍然在发生。然后我删除了定义标签，现在它工作了。下面是我使用的元定义。

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

不确定为什么这会导致jQuery draggable出现问题，但似乎是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>

父div是一个百分比宽度，比如30%。我只是把宽度改成像素。不确定我的DIV设计是否一团糟，但将其设置为固定大小解决了问题。我想这对我现在有用。。。DOCTYPE和元标记的内容没有更改。

相关文章：