ホームページ作成後、別のブラウザでのアンカー上部が表示されなくなる件について

解決済

質問者：siguma0503
質問日時：2016/06/20 10:44
回答数：6件

現在ホームページを作成していて、メニューバーを横に表示して、メニューの項目をクリックするとその横にあるコンテンツのbox内でアンカーを配置している部分までスクロールをして表示をするという仕組みで作成していました。

しかし、いざ完成しアップロードをして確認してみると、chrome上ではメニュー項目をクリックしてアンカーの位置まで移動して正しく表示されるのですが、IEやfirefoxではアンカーの位置までは正しく表記されているのですが、そのアンカーの位置より上部のコンテンツがスクロールバーより消えてしまいます。

このような場合を解決して全てのブラウザで見ても正しく表示される方法などあるのでしょうか？

作成に使用しているのはホームページビルダー20　クラシックです。

HTMLとCSSを利用しています、ネットでフリーのテンプレートを見つけてそちらをいじって作成しておりました。

No.1の回答に寄せられた補足コメントです。補足日時：2016/06/20 12:11
通報する
http://22.gigafile.nu/efa11bf0f930bab3f4d8c0ac2e …

こちらに本内容の物のhtml、cssをアップロードしていますのでこちらから見ていただけると幸いです。

補足日時：2016/06/20 16:52
通報する
すいません、当方まだhtml、cssになれていなくてそこまでわからない状態です…
ご丁寧に教えていただいているのにすいません・・・

先程いろいろ試していたのですが、
一度別の正常のテンプレートに先程のhtmlだけをソースに書き込み、ブラウザで確認してみたところ、ieでもChromeでも正常に同ページ内のアンカー位置へジャンプした後、アンカー上部にスクロールできました。
cssを適応させるとアンカー上部へスクロールできない状態でした。

No.4の回答に寄せられた補足コメントです。補足日時：2016/06/20 17:49
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： kon77
回答日時：2016/06/21 09:08

CSSファイル内に、

――――――――――――――――――

#sub{
　box-sizing: border-box;
　overflow:hidden;
　float:left;
　width:30%;
　background:#000000;
　margin-bottom:-32768px;
　padding-bottom:32768px;
}

――――――――――――――――――

という記述があると思うのですが、それの、

――――――――――――――――――

　margin-bottom:-32768px;
　padding-bottom:32768px;

――――――――――――――――――

という部分が原因かも知れません。

WEB検索してみましたら、これは、「メインコンテンツとサイドバーの高さを揃えるスタイル」のようです。

製作者が、両者の高さが違うと見栄えが悪いので、このスタイルを使ったのかも知れません。

一度、そちらの実際のデザインで、その部分を削除して検証してみてください。