Javascript 使用严格的DOCTyPE定义时，jQuery draggable将得到扩展
好的，我有一个可拖动的div#reportBox_1。当我拖动这个div时，它的宽度增加到原来宽度的3倍左右。现在这个#reportBox_1的宽度为29%，但它似乎是从两个层次上继承的，从#wrapper样式 这实际上是一个大得多的页面的一部分，但是为了缩小问题的范围，我减少了代码，我注意到只有当我有一个严格的DOCTYPE定义时才会出现这个问题。下面是我正在使用的相同代码。如果删除DOCTYPE定义，则可以解决拖动宽度问题 现在我想保留这个严格的DOCTYPE定义，因为在使用样式“border radius”时，出于某种原因删除它，IE9将不再显示圆形边框，但我想这是另一个问题 现在这个可拖动的宽度扩展问题在IE8和IE9中都出现了。有人能帮忙吗。我不熟悉jQuery。下面是我的代码： 更新：当我将整个页面恢复正常并删除DOCTYPE定义时，问题仍然存在。然后我删除了definition标签，它现在起作用了。下面是我使用的元定义Javascript 使用严格的DOCTyPE定义时，jQuery draggable将得到扩展,javascript,jquery,jquery-ui,jquery-plugins,doctype,Javascript,Jquery,Jquery Ui,Jquery Plugins,Doctype,好的，我有一个可拖动的div#reportBox_1。当我拖动这个div时，它的宽度增加到原来宽度的3倍左右。现在这个#reportBox_1的宽度为29%，但它似乎是从两个层次上继承的，从#wrapper样式 这实际上是一个大得多的页面的一部分，但是为了缩小问题的范围，我减少了代码，我注意到只有当我有一个严格的DOCTYPE定义时才会出现这个问题。下面是我正在使用的相同代码。如果删除DOCTYPE定义，则可以解决拖动宽度问题 现在我想保留这个严格的DOCTYPE定义，因为在使用样式“borde
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!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>
身体{
高度：800px；
背景色：#中交；
溢出：自动；
}
.mainWrapper{
宽度：1300px；
高度：800px；
}
.目录容器{
宽度：40%；
高度：800px；
背景色：#CC33；
浮动：左；
}
.预选报告显示框{
浮动：左；
高度：120px；
宽度：29%；
背景图片：url（picts/reports/report\u display\u box.jpg）；
文本对齐：居中；
左边距：21px；
填充顶部：20px；
边框：1px实心；
边框颜色：#3399FF；
}
函数初始化（）{
makeReportsDragable（）；
}
函数makeReportsDragable（）{
$（'#reportBox_1'）。可拖动({
助手：“克隆”
});
}
框1