0
私は、ColdFusionで簡単なツールチップのカスタムタグを作成しましたが、これはIEのクォークモードでうまく機能しています。しかし今、私たちはブラウザ間のサポートに移行しており、Firefoxが厳密なモードに入っているとき、プレースメントスクリプトは正しく動作していません。このコードは、ユーザーがホバリングしている要素のすぐ下にツールチップを配置するように設計されていますが、厳密なモードではツールチップは約12〜13ピクセルが高すぎます。4.01の要素をFFで厳密に配置する
なぜこのことが起こっているのか教えてください。 hover要素で 'top'が間違ってレポートされているのですか、またはツールチップ要素で絶対位置が正しく動作していませんか？
以下は、問題を示す簡単なテストコードです。正しく動作するように 'DOCTYPE'タグを削除してください。これは、quirksモードと標準モードの両方でIE8で正しく動作することに注意してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="common/css/standard.css" media="screen">
<link rel="stylesheet" type="text/css" href="common/css/standard_projector.css" media="projection">
<title>OTIS Shell</title>
<script>
var stillOver = 0;
function tipShowHide(tipID, deed) {
for (i=1; i<=numTips; i++) {
if (i != stillOver) {
document.getElementById('ToolTip' + i).style.visibility = 'hidden';
document.getElementById('ToolTip' + i).style.display = 'none';
}
}
if (stillOver == tipID) {
if (deed == 1) {
tipTop = getRealTop(document.getElementById('ToolTipParent' + tipID)) + document.getElementById('ToolTipParent' + tipID).offsetHeight;
tipLeft = getRealLeft(document.getElementById('ToolTipParent' + tipID));
tipTop = getRealTop(document.getElementById('ToolTipParent' + tipID)) + document.getElementById('ToolTipParent' + tipID).offsetHeight;
document.getElementById('ToolTip' + tipID).style.top = tipTop + 'px';
document.getElementById('ToolTip' + tipID).style.left = tipLeft + 'px';
document.getElementById('ToolTip' + tipID).style.visibility = 'visible';
document.getElementById('ToolTip' + tipID).style.display = 'block';;
} else {
stillOver = 0;
document.getElementById('ToolTip' + tipID).style.visibility = 'hidden';
document.getElementById('ToolTip' + tipID).style.display = 'none';
}
}
}
function tipOver(tipID, tipDelay) {
stillOver = tipID;
setTimeout("tipShowHide(" + tipID + ", 1)", tipDelay);
}
function getRealLeft(el) {
if (arguments.length==0)
el = this;
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null){
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
function getRealTop(el) {
if (arguments.length==0)
el = this;
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null){
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
var numTips = 1;
</script>
</head>
<body>
<DIV ID="ToolTip1" style="z-index:999; position:absolute; top:0px; left:0px; visibility:hidden; display:none; width:685px; color:#000000; border:1px solid #000000; background-color:#ffffee;" >
<table style="width:200px;">
<tr valign="top">
<td style="width:350px;">
<span style="text-decoration:underline; font-weight:bold;">Test Stuff</span><br>
Test text
</td>
</tr>
</table>
</DIV>
<SPAN ID="ToolTipParent1" ONMOUSEOVER="tipOver(1, 1000);" ONMOUSEOUT="tipShowHide(1, 2);">
<div id="dynaKeyDiv" align="left" class="tableControlHeaderDiv" style="width:#tableWidth#px;">
<table id="dynaKeyTable" border="1" class="tableControlHeader" cellpadding="2" cellspacing="0" style="width:#tableWidth#px;">
<tr>
<td style="width:100%; font-weight:bold;">
Test Element
</td>
</tr>
</table>
</div>
</SPAN>
</body>
</html>
Web開発者の声明：「IEでは動作しますが、他のブラウザでは動作しない場合、コードは間違っています」 Quirksモードは標準モードとは異なるボックスレイアウトであり、ブラウザでマークアップを同じにすることは期待できません。 – Rob
私はそのマントラに必ずしも同意しないでしょう。おそらく、私の質問は「私のコードは間違っていますか？ ;） – Nicholas