0

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

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

现在我想保留这个严格的 DOCTYPE 定义，因为由于某种原因，IE9 在使用“border-radius”样式时将不再显示我的圆形边框，但我想这是另一个问题。

现在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 回答