アプリ版:「スタンプのみでお礼する」機能のリリースについて

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件)

打ち間違いかもしれませんが、


div#targrtになってますよ。
div#targetではないでしょうか?
    • good
    • 0

≫しかしやはり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属性は非推奨だったような・・
    • good
    • 0
この回答へのお礼

ORUKA1951さま
ありがとうございます。
ブロック要素で囲む方法も試してみましたが、やはりIEでは反映されないようです。。
とりあえずは場しのぎでJavascript scrollToメソッドで位置を指定してみました。

どこか宣言が間違っていたり重複してたりする箇所があったのかもしれません。コーディングを一度整理して見直してみたいと思います。

ご意見ありがとうございます!

お礼日時:2009/01/29 09:39

HTMLが間違ってます。


a name="****" とid="****"はいずれも特定の位置を示すので同じはず。
単純に
<img src="URL" id="anchor" width="" height="" alt="" />でよいのでは?
    • good
    • 0
この回答へのお礼

ORUKA1951さま
早速ご意見いただきありがとうございます!
確かにそうでしたね、imgタグにid="anchor"をかけてみました。(altは質問欄では省略してました、ちゃんとつけてます、わかりづらくてすみません)

しかしやはりIEではポイントの位置をずらして表示することはできませんでした…。
試しにrelative→absolutにしても論外なようで。難しいです…

お礼日時:2009/01/29 00:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!