WIN IEのみで失敗してしまうCSS問題についてご質問させてください!
『ページ内アンカーリンクのポイントをブラウザ画面トップから100pxほど下にずらしたポイントに表示したい』
というのも、ブラウザ画面トップにposition:fixed;のオブジェクトを配置しているため、
アンカーリンクでページ内ジャンプした際に先頭部分が上記オブジェクトの後ろに隠れてしまうのです。
<a name="XXXXX" id="anchor"><img src="XXXXXXX"/></a>
このタグに対してのCSSは
#anchor{
position:relative;
top:-100px; left:0;
}
このコマンドで
Mac環境(safari / Firefox)
Win環境(Firefox)
では成功したのですが、IE6 / IE7では認識せず、スクロールバーがなぜか2本重なるバグ?が表示されるのです。
このような現象の原因と対策がございましたらお教えいただきたいです。
どうぞよろしくお願いします!
(横2つ割のインラインフレームは可能なら使いたくないのですが、他に方法がなかったら仕方ないのでしょうか。。)
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
≫しかしやはりIEではポイントの位置をずらして表示することはできませんでした…。
なら、<img>はインライン要素ですから、ブロック要素で囲んでしまえばよい。
<div class="content">
<div id="target"><img></div>
</div>
div.content{position:re;ative;}
div#targrt{ margin:0px;padding:0px;postition:absolute;top-100px;}
★未確認
なお、XHTMLには<a>にname属性は非推奨だったような・・
ORUKA1951さま
ありがとうございます。
ブロック要素で囲む方法も試してみましたが、やはりIEでは反映されないようです。。
とりあえずは場しのぎでJavascript scrollToメソッドで位置を指定してみました。
どこか宣言が間違っていたり重複してたりする箇所があったのかもしれません。コーディングを一度整理して見直してみたいと思います。
ご意見ありがとうございます!
No.1
- 回答日時:
HTMLが間違ってます。
a name="****" とid="****"はいずれも特定の位置を示すので同じはず。
単純に
<img src="URL" id="anchor" width="" height="" alt="" />でよいのでは?
ORUKA1951さま
早速ご意見いただきありがとうございます!
確かにそうでしたね、imgタグにid="anchor"をかけてみました。(altは質問欄では省略してました、ちゃんとつけてます、わかりづらくてすみません)
しかしやはりIEではポイントの位置をずらして表示することはできませんでした…。
試しにrelative→absolutにしても論外なようで。難しいです…
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フッターの下に隙間ができてしまう
-
HTMLですCSSです この画像のよ...
-
[W3C]フラッシュ画像について
-
HTMLですCSSです 画像のように...
-
Ctrl+F(検索)の窓を出したいの...
-
ヘッダー部フッター部の固定と...
-
フッター上部に謎の隙間
-
離れた場所にマウスオーバーで...
-
スタイルシートで位置固定する...
-
【html5】canvasでの文字の形の...
-
ロールオーバーで画像拡大、z-i...
-
javascriptテキストBOX色を元に...
-
テキストエリア内の一部の文字...
-
背景色と連動するスライドショ...
-
スライドショー「Skitter」をカ...
-
1枚の画像をクリックすると複数...
-
web制作(HP作成について教えて...
-
textareaに画像を表示したい
-
HTMLタグに複数のクラスを設定...
-
スワップイメージのフェード方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報