【CSSハック】アンカーポイントの位置をずらしたいのです

質問

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では認識せず、スクロールバーがなぜか２本重なるバグ？が表示されるのです。

このような現象の原因と対策がございましたらお教えいただきたいです。
どうぞよろしくお願いします！
（横２つ割のインラインフレームは可能なら使いたくないのですが、他に方法がなかったら仕方ないのでしょうか。。）

回答No.3

noname#83877

打ち間違いかもしれませんが、
div#targrtになってますよ。
div#targetではないでしょうか？

回答No.2

ORUKA1951

≫しかしやはり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

ORUKA1951

HTMLが間違ってます。
a name="****" とid="****"はいずれも特定の位置を示すので同じはず。
単純に
<img src="URL" id="anchor" width="" height="" alt="" />でよいのでは？

お礼

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

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