質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

6255閲覧

Firefoxで同一ページリンクが機能しない

orange_drop

総合スコア25

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/04/19 02:32

編集2017/07/11 01:28

ページ上部にナビをつけて(リストをcssで調整)、クリックすると該当箇所まで
ジャンプする形をとりたいと思っています。

Chrome、IEでは思ったように動いてくれるのですが、
Firefox(52.0.2)では近くまではいくのですが、
思っているところより下の方に移動してしまいます。

何か対応方法がありましたら、教えてくださいませ。

<div class="menu"> <ul class="menu-a"> <li><a href="#">北海道</a><ul><li></li> </ul> </li> <li> <a href="#tohoku">東北地方</a><ul> <li><a href="#miyagi">宮城県</a></li> <li><a href="#akita">秋田県</a></li> </ul> </li> </ul> </div> <div class="menu"> <ul class="menu-a"> <li> <a href="#kanto">関東地方</a><ul> <li><a href="#gunma">群馬県</a></li> <li><a href="#saitama">埼玉県</a></li> </ul> </li> <li> <a href="#chubu">中部地方</a><ul> <li><a href="#yamanashi">山梨県</a></li> <li><a href="#nagano">長野県</a></li> </ul> </li> </ul> </div> -------------------------------------------- <a name="tohoku" id="tohoku"></a> <!--東北地方--> <div class="pref-box-03"> <div> <a name="miyagi" id="miyagi"></a> <div> ■■■■■■ </div> </div> <a name="yamagata" id="yamagata"></a> <div> ■■■■■■ </div> </div> <a name="kanto" id="kanto"></a> <!--関東地方--> <div class="pref-box-04"> <a name="gunma" id="gunma"></a> <div> ■■■■■■ </div> <div> ■■■■■■ </div> <a name="saitama" id="saitama"></a> <div> ■■■■■■ </div> </div>

###試したこと
<a name="●●" id="●●"></a>
の間にスペースを入れてみましたが、動作は変わらずでした。


【追記】
教えて頂きましたページを参考に変更してみました。
こちらでも「tokyo」をクリックするとfirefox(ver54)だと
tokyo指定部分より少し下にジャンプしてしまいます。

HTML

1 2<div class="menu_box"> 3<ul class="menu"> 4<li> 5<a href="#">東北地方</a><ul> 6<li><a href="#tohoku">青森県</a></li> 7<li><a href="#tohoku">岩手県</a></li> 8<li><a href="#miyagi">宮城県</a></li> 9<li><a href="#tohoku">秋田県</a></li> 10<li><a href="#tohoku">山形県</a></li> 11<li><a href="#fukushima">福島県</a></li> 12</ul> 13</li> 14<li> 15<a href="#">関東地方</a><ul> 16<li><a href="#kanto">茨城県</a></li> 17<li><a href="#kanto">栃木県</a></li> 18<li><a href="#gunma">群馬県</a></li> 19<li><a href="#saitama">埼玉県</a></li> 20<li><a href="#chiba">千葉県</a></li> 21<li><a href="#tokyo">東京都</a></li> 22<li><a href="#kanagawa">神奈川県</a></li> 23</ul> 24</li> 25</ul> 26</div> 27 28 29 30<div id="miyagi" name="#miyagi"></div> 31<div> 32■■■■■■■■■ 33</div> 34 35 36<div id="fukushima" name="#fukushima"></div> 37<div> 38■■■■■■■■■ 39</div> 40 41 42 43<div id="kanto" name="#kanto"></div> 44<!--関東地方--> 45 46 47<div id="gunma" name="#gunma"></div> 48<div> 49■■■■■■■■■ 50</div> 51 52<div id="saitama" name="#saitama"></div> 53<div> 54■■■■■■■■■ 55</div> 56 57<div> 58■■■■■■■■■ 59</div> 60 61<div> 62■■■■■■■■■ 63</div> 64 65<div> 66■■■■■■■■■ 67</div> 68 69<div> 70■■■■■■■■■ 71</div> 72 73<div> 74■■■■■■■■■ 75</div> 76 77<div> 78■■■■■■■■■ 79</div> 80 81<div id="chiba" name="#chiba"></div> 82<div> 83■■■■■■■■■ 84</div> 85 86<div id="tokyo" name="#tokyo"></div> 87<div> 88■■■■■■■■■ 89</div> 90 91<div> 92■■■■■■■■■ 93</div> 94 95<div> 96■■■■■■■■■ 97</div> 98 99<div> 100■■■■■■■■■ 101</div> 102 103 104<div id="kanagawa" name="#kanagawa"></div> 105<div> 106■■■■■■■■■ 107</div> 108 109<div> 110■■■■■■■■■ 111</div> 112 113<div> 114■■■■■■■■■ 115</div> 116 117

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2017/07/10 08:39

Firefox 54.0 においてずれるような挙動は起こりませんでした。再現するコードはありますか?
orange_drop

2017/07/11 01:28

ご返信ありがとうございます。修正したコードを追記致しました。ご確認頂けますようお願い致します。
guest

回答3

0

FireFoxは癖があるのでちょっと違うやり方が必要です。

こちら参考にしてみてください。
Firefoxで指定したアンカー(ページ内リンク)に飛ばない件

投稿2017/04/19 02:46

lazhuward

総合スコア1294

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange_drop

2017/07/10 07:52

ご連絡が遅くなり、申し訳ありません。 こちら参考にさせて頂いたのですが、解決しませんでした。。。 何か他の方法はございませんでしょうか?
guest

0

確認したいのですが、すべてのアンカーリンクがそのように少しずれた状態で移動しますか?
また、アンカーリンクによってズレが少し小さいとか大きいとかはありますか?

もしズレに違いがあったらまた原因が絞れそうな気がします。

また、もしかしたらアンカーリンクの位置をブラウザが判断する際に、marginやpaddingの計算ロジックがおかしくなっている可能性があるので、すべてのcssを外した状態で質問者様のfirefoxで動作がおかしくなるのかどうかを確認してみてはいかがでしょうか?

何か手がかりが見つかるかもしれません!

投稿2017/07/30 08:36

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange_drop

2017/07/31 06:35

アンカーによってズレに差があるようです。 教えて頂いた通りcssを無効にしてみましたが、その場合は問題なく動作確認がとれます。 そうなると、やはりmarginとかになるのでしょうか…?
MasakazuFukami

2017/07/31 06:43

断定はできませんがその可能性は高いと思います! 置き換えることが可能であれば、marginをpaddingにしたり、逆にしてみたりしてはいかがでしょうか!
yoshinavi

2017/07/31 07:30

横からスミマセン。以前、ジャンプでは無いですが、通常のテキストでFireFoxのみ、行間に違いが大きめに出る事があり、色々確認後、margin相殺かなと思いpaddingに変えて解決したことを思い出しました。verにより差があるブラウザだと思いますので、試す価値はあると思います。
MasakazuFukami

2017/07/31 08:00

@yoshinavi さん そうなんですね!!! 各ブラウザのレンダリングエンジンの差異なんですかね?? なんにせよ試す価値はあると思います! ありがとうございます!
guest

0

FireFoxも含め動作検証してますが、結構困ってる方が多いみたいですが、私自身この現象は幸いにも、まだ当たった事はないですね。

参考までに
http://design-ya.net/blog/2015/10/19/35/

投稿2017/07/30 08:25

yoshinavi

総合スコア3523

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange_drop

2017/07/31 06:42

教えて頂いたページ確認致しました。ありがとうございます。 以前も同じような形でアンカーリンクしていたのですが、 その時はFirefoxでもこの問題には当たらなかったんですけど…泣
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問