リンクで違うページの指定箇所へ飛ばそうとしています。

質問

リンクで違うページの指定箇所へ飛ばそうとしています。

IEやsafariでは問題なく指定箇所に飛ぶのですが、
Firefoxだと何故か指定箇所ではなく、そのページの一番下に飛んでいきます。

IEは6、7、8
safariは4.0.2で、
Firefoxは3.6.6を使用しています。

Firefoxのバグなのでしょうか？
(同じページ内の指定箇所だとちゃんと飛びます)

急ぎの為大変困っております。
ご回答お願い致します。

HTML--------------------------------------------------------------

<a href="http://～～～/●●.html#abc" />

飛ばしたい場所

<div id="abc">
<img src="画像URL" border="0" alt="" />
</div>

回答No.8

9000033

私も、同じような事にぶつかりました。

Firefoxのみの現象で、

<a href="#aaa">コンテンツへ</a>

<div id="aaa">コンテンツ内容・・・</div>

ページ内リンク（HTML5）の際にページの一番下へ移動してしまう現象がありました。

私の場合原因は、Jqueryプラグインでした。

原因のプラグインをこちらを、
ヘッダーに読み込んでいたところを
ページの下</body>前に変更すると解決できましたよー

なせばなる♪

回答No.7

kuzumiHK

＞赤い線は指定した場所よりもだいぶ下の方に、四角形の形で出てきました。

それでは、Firefoxでその赤い枠の付近をテキスト選択して、
右クリックで「選択した部分のソースを表示」を選択してみてください。

そのソースの周辺に「abc」らしき文字列がありませんでしょうか。
もしありましたら、その文字を変更するか、
アンカーのほうを、かぶらないようなidに変更する必要があります。

回答No.6

kuzumiHK

スタイルがおかしな位置に移動させている可能性がありそうですね。
では、↓をbody内に追加するとどんな数値が出てくるでしょうか。

<script type="text/javascript">
var element = document.getElementById("abc");
alert("上" + element.offsetTop + "px、左" + element.offsetLeft + "px");
</script>

また、下記のスタイルを追加すると赤いボーダーはどこに出ますでしょうか。

<style type="text/css">
<!--
*{
border-top:1px solid #090 !important;
border-bottom:1px solid #039 !important;
}

#abc{
clear:both !important;
float:none !important;
display:block !important;
visibility:visible !important;
overflow:visible !important;
position:static !important;
margin:100px !important;
padding:100px !important;
width:200px !important;
border:6px solid #f00 !important;
z-index:9999 !important;
clip:auto !important;
text-indent:0 !important;
}

#abc *{
float:none !important;
display:block !important;
}
-->
</style>

お礼

ご回答いただきありがとうございます。

赤い線は指定した場所よりもだいぶ下の方に、四角形の形で出てきました。
リンクはその赤い線の一番上（四角形の上辺）に飛んでいきます。

<script type="text/javascript">
var element = document.getElementById("abc");
alert("上" + element.offsetTop + "px、左" + element.offsetLeft + "px");
</script>

こちらを入れても数値？というのがでてきませんでした・・・
知識不足で申し訳ありません。

どうかアドバイスをお願い致します。

回答No.5

kuzumiHK

idやnameに他でabcを使っている可能性はありませんでしょうか。
また、ページ内に、

<style type="text/css">
<!--
#abc{
border-top:1px solid #f00;
}
-->
</style>

を追加した場合、ボーダーはどの位置に出るでしょうか。

お礼

ご回答頂きありがとうございます。

結果、どこにもでませんでした・・・

本当に全く関係のない文字に変更したところ、
飛ぶリンクと飛ばないリンクがでてきました。

しかし飛ぶほうも、一度ページの下までいき、
すぐに上の指定場所まで飛んでいくといった、よくわからない状態になりました。

指定場所に飛ばない方は、相変わらずページの下に飛ぶだけです。

何か解決策はございますでしょうか・・・

回答No.4

kernel_kaz

>idからnameにかえてみたのですが

<div id="abc"> を <div name="abc"> に変えたの？
そうじゃなくて <a name="abc"> に変えても駄目？

お礼

ご回答頂きありがとうございます。

<a name="abc">◎○</a>でしました。
ですが何故か飛んでくれません・・・

同ページ内だと問題ないのですが・・・

回答No.3

yyr446

まだ解決されてませんが、同様の質問が7/13にも出てます。

http://okwave.jp/qa/q6035408.html

<a name="... でも　<div id="... も外部ファイルからアンカーのハッシュ
で移動しますけどねえ（Firefoxでも）

DOCタイプによる違いかなああ、ちょっとだけ調べてみよう。

お礼

ご回答頂きありがとうございます。

URL有り難うございます。
参考にさせて頂きます！

補足

度々すみません。
もしわかりましたら、教えていただけると助かります・・・！

回答No.2

kernel_kaz

アンカー目的なら、<div id="abc">じゃなくて、<a name="abc">じゃ無いのかな？
<div id="abc">でもアンカー認識するかも知らんけど、それはブラウザの独自仕様じゃなかったっけ？
HTMLの基本で書いたら？

お礼

ご回答頂きありがとうございます。

idからnameにかえてみたのですが、それでもページの下に飛ばされてしまいます。

他に何か解決策がありましたら、宜しくお願い致します・・・。

回答No.1

aokii

IE
safari
Firefoxに互換性はありません。

お礼

ご回答頂きありがとうございます。
互換性はないんですね。

何かhtmlで解決策がありましたら、ご回答頂けると助かります・・・！