- 締切済み
宣言文とjavascript
javascriptでチップヘルプを表示させています。 文字にマウスが乗れば説明文が表示されるものです。 こちらの宣言文を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 下記のもの <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> に変更すると、チップヘルプが上手く表示されません。 指定した位置より、かなり離れてしまいます。 ブラウザ別（IEとFirefox）で確認したところ、Firefoxでは表示もされないようになります。 こちらを解消する方法はあるのでしょうか？
- kuroro0000
- お礼率52% (11/21)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <script type="text/javascript"> function TooltipFlip(obj,id){ var Tooltip = document.getElementById(id); if (Tooltip.style.display == "none"||Tooltip.style.display == ""){ var X; var Y; obj.style.position = "absolute"; X = obj.offsetLeft; Y = obj.offsetTop; obj.style.position = "relative"; Tooltip.style.position = "absolute"; Tooltip.style.left = 15 + X + "px"; Tooltip.style.top = 10 + Y + "px"; Tooltip.style.opacity = 0.3; Tooltip.style.display = "block"; Tooltip.style.filter = "alpha(Opacity='30')"; } else{ Tooltip.style.display = "none"; } } </script> <style type="text/css"> body{ height:700px; background-color:yellow; } p{ background-color:pink; width:80%; } #tooltipbundle p{ width:30%; display:none; background-color:orange; } .tooltip{ background-color:red; } </style> </head> <body> <p><span class="tooltip" onclick="TooltipFlip(this,'fuga');">今日の朝飯</span>は不味かった。腹の調子が悪い。</p> <p>不味かったといえば<span class="tooltip" onclick="TooltipFlip(this,'gura');">昨日の晩飯</span>は不味かった。</p> <div id="tooltipbundle"> <p id="fuga">賞味期限切れの納豆</p> <p id="gura">泥団子</p> </div> <p>なんだかよくわからなかったから全部書き直してみた。leftやtopには 単位"px"がないといけない。</p> </body> </html>
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
調べてみないとわかりませんが、 element.topとか、標準モードでは使えなかったと思います。 それ以外にもいくつか互換モードでは使えるが標準モードでは使えないプロパティや、 それとは逆に標準モードでは使えるが互換モードでは使えないプロパティもありますので、 標準モードと互換モードの両方をサポートするなら、 それら全てを考慮しないと行けません。 スタイルシートを使っても、その解釈の仕方が違うことがありますから、 文法上は正しくても表示は異なることがありますので、注意して下さい。 新しいメジャーなブラウザは、互換モードではCSS1、標準モードではCSS2が使われます。
お礼
ご回答ありがとうございます。 双方のモードでサポートの考慮と言うわけではなかったんですが、モードの違いで記述が異なるようですね。 自分はjavascriptの専門ではないので、ただ単にコピペして使用していたのですが、某HPのガイドラインで宣言文を変更しなくてはいけなくなりまして・・・。 どちらにせよ、互換モード、標準モードも相違にあるようですね、原因は。 少し弁口してみます。
- PED02744
- ベストアンサー率40% (157/390)
loose.dtdを指定したら、「標準モード」になって、何もつけないと「互換モード」になります。 「互換モード」で表示されて「標準モード」で正しく出ないのであれば、cssの記述がおかしい(指定している位置がおかしい)のではないでしょうか。
- himajin100000
- ベストアンサー率54% (1660/3060)
そんなん実際のjavascriptのコード見てみないとわからないよ(笑) title属性を使っているっていうんでもないんでしょ？ できるだけ状況が再現する短いコードを回答者に示してくれなきゃ。 こっちで再現できれば調べてみるけどね。 http://japanese.joelonsoftware.com/Articles/PainlessBugTracking.html http://developer.mozilla.org/ja/docs/Bugzilla-jp:Guide
補足
ちょっと長いですかね？どこに原因があるか分からないので。 基本的にCSSでは位置指定してません。 timerID = 0; sec = 20 * 1000; var o=30; var Win = navigator.userAgent.indexOf('Win')!=-1; var Mac = navigator.userAgent.indexOf('Mac')!=-1; var X11 = navigator.userAgent.indexOf('X11')!=-1; var Moz = navigator.userAgent.indexOf('Gecko')!=-1; var Safari = navigator.userAgent.indexOf('Safari')!=-1; var msie = navigator.userAgent.indexOf('MSIE')!=-1; function MM_showHideLayers() { //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } function b_color(idname,cn){ if (document.getElementById) { document.getElementById(idname).style.backgroundColor = cn; } } function replace_css(id,url){ if(!document.getElementById) { return false; } var element = document.getElementById(id); if(!element || !element.cloneNode) { return false; } var new_node = element.cloneNode(true); new_node.href = url; element.parentNode.replaceChild(new_node,element); return true; } function sDomChipHelp(divID,eventOBJ) { var offX = offY = 0;var x;var y; if (document.all) { //IE x=eventOBJ.x; y=eventOBJ.y; chipOBJ = document.all[divID].style; offX = document.body.scrollLeft; offY = document.body.scrollTop; chipOBJ.visibility = "visible"; switch (divID) { case 'popc001': chipOBJ.left = x +10 + offX; chipOBJ.top = y +10+ offY; break; } } else { // Not IE x=eventOBJ.pageX; y=eventOBJ.pageY; if (document.layers) { // ? chipOBJ = document.layers[divID]; } else { // Netscape 7 Win chipOBJ = document.getElementById(divID).style; } chipOBJ.visibility = "visible"; switch (divID) { case 'popc001': chipOBJ.left = x+15; chipOBJ.top = y+10; break; default: chipOBJ.left = x; chipOBJ.top = y; } } timerID = setTimeout("hChipHelp('"+divID+"')",sec); } function hChipHelp(divID) { if (document.all) { // IE chipOBJ = document.all[divID].style; } else { // Not IE if (document.layers) { // ? chipOBJ = document.layers[divID]; } else { // Netscape 7 Win chipOBJ = document.getElementById(divID).style; } } chipOBJ.visibility = "hidden"; clearTimeout(timerID); } function fade(obj,v) { if (document.all) { //IE obj.filters["alpha"].enabled = true; obj.filters["alpha"].style = 0; if (v) { obj.filters["alpha"].opacity = o; } else { obj.filters["alpha"].opacity = 100; } } else { // Not IE if (Moz) { if (v) { document.getElementById(obj.name).style.MozOpacity = 0.3; } else { document.getElementById(obj.name).style.MozOpacity = 1; } } else { obj.filters["alpha"].enabled = true; obj.filters["alpha"].style = 0; if (v) { obj.filters["alpha"].opacity = o; } else { obj.filters["alpha"].opacity = 100; } } } }
お礼
わざわざ書き直して頂いてありがとうございます。 なんとなくヒントになったような気がします。 いろいろと試してみます。