アンカータグがハッシュにジャンプしていない

Question

私はこのテーマに関するさまざまな記事を読んできました。 「このClick'n'Pick Setは次の2つの製品で構成されています」という見出しの下にある2つの製品サムネイル画像はクリック可能ですが、ページのさらに下にある<div>要素には移動しません。代わりに、それらは例えばhttp://www.premierrange.co.uk/#bundle_product_anchor_448へのナビゲーションを引き起こす。 LinuxのChrome（18.0.1025.33ベータ版）とFirefox（10.0.1）の両方でこれを見ることができます。

http://www.premierrange.co.uk/index.php?main_page=clicknpick&groups_id=2&chosen_0=243&chosen_1=448

だから、例えば '＃のbundle_product_anchor_243' をターゲットにアンカーがあります：

<a href="#bundle_product_anchor_243" title="Click here to jump to the 70cm Truly Curved Black Glass Curved Cooker Hood H77-7B"> 
    <img src="http://www.premierrange.co.uk/thumbnailer.php?filename=images/H77-700.jpg&amp;height=100" alt="70cm Truly Curved Black Glass Curved Cooker Hood H77-7B"> 
</a> 

これは、ページダウン、さらに<div>をターゲットにしています。

<div class="productSeparator" id="bundle_product_anchor_243"> 
    <h1>Product number 1 in this bundle of 2 products</h1> 
</div> 

私も作ってみました代わりにターゲット<div>内の<h1>がターゲットになります。ターゲットがdivよりもむしろインライン要素ですが、何も動作していないようです。

が正しく動作している<div>は、対象の要素を含む<div>がドキュメントに含まれる時点までに完全に閉じられています。私は、<a>がブラウザによって解析された時点で、ターゲット要素が定義されていないという問題はないと思います。

手動で「＃bundle_product_anchor_448」をURLに追加すると機能します。

私は、簡単に対処できないことが多い多数の要因のために、このページが多数のポイントでHTML検証に失敗することを知っています。私はこの基本的な「名前付き要素へのジャンプ」機能は無関係に動作するはずだと思っていたでしょう。この小さなナビゲーションの特徴以外は、ページは完全に機能しています。

誰でも手掛かりがありますか？

Answer 1

<base href="http://www.premierrange.co.uk/"></base>をページヘッダーから削除してみます。

<base>タグでは、ページ上にすべての相対URL（http://www.example.com/ ...と表示されないURL）のベースURLまたはターゲットを指定します。それがなければ、この変更に対応するために他のリンクを修正する必要があるかもしれませんが、あなたのリンクは意図したとおりに機能するはずです。

Answer 2

アプリケーションで<base>タグを使用しているときに、最善のアプローチは、単に絶対URLは、あなたがにいる同じページを指すと、ハッシュ前に絶対URLのを使用することです。だから、

、あなたと仮定しますあなたがハッシュする前に、絶対現在のURLを含める必要があります代わりに

<a href="#bundle_product_anchor_243">... 

の 'http://example.com/products/curved-glass' のページ、上にある：

<a href="http://example.com/products/curved-glass#bundle_product_anchor_243">...  

ほとんどの環境で現在のURLを見つけるのは簡単な作業ですが、この方法でもアプリケーションの他の部分に悪影響を及ぼす可能性のある、<base>タグの削除を回避できます。