Question

我有一个div元素，我正在尝试移动用户点击canvas元素的任何地方。

我有一个CSS样式，div将位置设置为绝对位置，初始位置（顶部，左侧）。

我有javascript捕获用户的点击事件，并将div元素的左侧和顶部设置为点击位置，并设置div的文本。

我的问题是，在我在html文件上设置DOCTYPE之前，这工作正常。现在div保持在同一个地方，同时显示新文本，我假设位置问题与我如何使用CSS有关。

设置div元素位置的正确方法是什么？ html或多或少会像这样：

<!DOCTYPE HTML>
<html>
<head>
   <style type="text/css">
    #myDiv{
     position:absolute;
     top:100px;
     left:835px;
   }
   </style>
</head>
<body><canvas id='canv'></canvas>
<div id='myDiv'>-</div>
</body>
</html>

这是javascript的样子，它为我找到了div：

var theDiv = document.getElementById('myDiv');
theDiv.style.left = selShp.pinx; // selShp.pinx is the position of a shape object I've created, which is how I position the shape on the canvas
theDiv.style.top = selShp.piny; // piny is just the y position

在设置DOCTYPE之前，这适用于Chrome，Firefox，Safari移动版和Opera。设置完成后，我可以在IE9中渲染到画布，然后在所有浏览器中div的定位停止工作 - 只停留在初始位置。

Answer 1

我发现了我的问题。我设置新职位的javascript是这样的：

var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx; // selShp is the selected shape object, and pinx is x location (numeric) on canvas
theDiv.style.top = selShp.piny; // piny is y location on canvas (numeric)

在我使用doctype之前这很好用，因为显然浏览器对我来说只是给出一个数字很好，但我不得不将代码更改为此，并且它可以工作：

var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx.toString() + 'px'; 
theDiv.style.top = selShp.piny.toString() + 'px';

愚蠢，新手的错误，我想。我对解决方案的理解是，标准HTML要求您将左侧和顶部设置为字符串，并指定单位。

Answer 2

真正的问题始于不使用doctype。所有现代网页都需要一个doctype来使浏览器远离“怪癖模式”。在这种情况下，盒子模型与使用当前Web标准时应该不同。你应该阅读维基百科或谷歌上的怪癖。

div位置与DOCTYPE效应之间的关系

2 个答案: