internet-explorer - 相対的に配置されたアンカー (IE の問題)

Question

次のようにアンカーを配置しています。

#test-link {
    position: relative;
    bottom: 100px
}

ページにアクセス#test-linkすると、その特定のセクションにジャンプする必要がありますが、100px 高くなります。そうしないと、必要なものに対してページがスクロールしすぎます。

これはまともなブラウザでは問題なく動作しますが、IE7、8、および 9 では相対位置が完全に無視されます。

アンカーにテキストを追加したり、さまざまな CSS プロパティ (例: ) を追加するなど、さまざまな修正方法を試しましたがdisplay: block、違いはありません。

score 2 · Accepted Answer

案の定、IE7 から IE10 は相対的に配置された要素には移動しません (むしろ、その自然な位置に移動します)。例外が 1 つあります。IE8 は、期待どおりに動作しました。IE 以外でチェックしたほぼすべてのブラウザも期待どおりに動作しました。

これは、IE6 から IE10で絶対配置で問題なく動作するため、相対配置の問題のようです。もちろん、相対的な位置付けを試みているため、これはあなたの状況には役立ちません。

これをしばらくいじって見つけた唯一の解決策は、マージンを使用して相対位置を複製することです。

#movedElement {
    display: block;
    margin: -100px 0 100px;
}

これにより、IE のすべてのバージョンで、他のブラウザーで見られる結果と同様の結果が得られました。これは理想的ではありませんが、より良い情報が見つかるまでは十分かもしれません。

私はこれを調査し続け、詳細がわかったら戻ってきます。

それまでの間、ターゲット領域の前に空白を追加する別の一般的な方法は、マージンを追加してその要素の上のスペースを拡張することです。これは、http://jsfiddle.net/Px6r9/1/show/#fooでオンラインで表示可能な例で行ったことです。

#paddedContent {
    padding-top: 50px; /* Adds whitespace above content */
}

1 に答える 1