Связь между положением div и эффектами DOCTYPE - PullRequest
Новая
       10

Связь между положением div и эффектами DOCTYPE

2 голосов
/ 15 июля 2011

У меня есть элемент div, который я пытаюсь переместить туда, куда пользователь нажимает элемент canvas.

У меня есть стиль CSS для div, устанавливающий абсолютную позицию с начальной позицией (вверху, слева).

У меня есть javascript, который фиксирует событие нажатия пользователя, устанавливает левую и верхнюю часть элемента div в месте щелчка и задает текст div.

Моя проблема в том, что это работало нормально, прежде чем я установил DOCTYPE для html-файла. Теперь 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 mobile и Opera. Когда он установлен, я могу выполнить рендеринг на холст в IE9, но затем расположение div во всех браузерах перестает работать - просто остается в исходном положении.

Ответы [ 2 ]

2 голосов
/ 15 июля 2011

Я разобрался в своей проблеме.Мой 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 требует, чтобы вы указали левое и верхнее в виде строк с указанием единиц измерения.

0 голосов
/ 16 июля 2011

Настоящая проблема начинается с неиспользования типа документа.Doctype требуется от всех современных веб-страниц, чтобы браузер не выходил из «режима причуд».В этом случае блочная модель отличается от используемой в настоящее время веб-стандартов.Вы должны прочитать о причудах в Википедии или Google для этого.

...