div位置とDOCTYPEのエフェクトとの関係

基本的に、ユーザーがキャンバス要素をクリックした場所を移動するためにdiv要素があります。div位置とDOCTYPEのエフェクトとの関係

私はdivを初期位置（上、左）で絶対位置に設定するCSSスタイルを持っています。

私は、ユーザーのクリックイベントをキャプチャし、div要素の左と上をクリックの位置に設定し、divのテキストを設定するjavascriptを持っています。

私の問題は、htmlファイルにDOCTYPEを設定する前にこれが正常に機能していたことです。今、新しいテキストを表示しながら、divは同じ場所にとどまり、位置の問題はCSSの使い方と関係していると思います。

div要素の位置を設定する正しい方法は何ですか？ HTMLは、多かれ少なかれ、このように書きます：、DOCTYPEを設定する前に

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

、これはクロム、Firefoxの上で美しく働いた：

<!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を見つけましたSafariモバイル、Opera IE9のキャンバスにレンダリングすることができますが、すべてのブラウザでのdivの位置付けは機能しません。ちょうど初期の位置にとどまります。

出典

2011-07-15 Jon Fournier

http://jsfiddle.net/4BnhX/は私にとってはうまくいくと思われます –

私は私の問題を理解しました。新しい位置を設定するための私の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は、ユニットを指定して、文字列としてleftとtopを設定する必要があります。

出典

2011-07-15 19:38:34

doctypeはブラウザのユーザーにどのレンダリングエンジンが影響するか、あるいは「標準」と「奇妙」モードの間で切り替えることさえできます。このスイッチは、「同じ」ブラウザであっても、ページのレンダリング方法を根本的に変更することができます。 –

+1同じ問題がありました。 – Hossein

実際の問題は、doctypeを使用しないことから始まります。 doctypeは、ブラウザを「quirksモード」から外すために、すべての最新のWebページに必要です。その場合、ボックスモデルは現在のWeb標準を使用する必要があるモデルとは異なります。あなたはWikipediaやGoogleのquirksについて読むべきです。

出典

2011-07-15 20:39:18 Rob

div位置とDOCTYPEのエフェクトとの関係

答えて

関連する問題