Question

我已经阅读了关于这个主题的各种帖子，并认为我理解通常的失败点。我发现我的两个产品缩略图图片在“This Click'n'Pick Set包含以下2个产品”标题下，可以点击，但不要带我到页面下方的命名<div>元素。相反，它们会导致导航到http://www.premierrange.co.uk/#bundle_product_anchor_448。我在Linux上的Chrome（18.0.1025.33 beta）和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>

我也试过让目标<h1>内的<div>成为目标，以防目标必须是内联元素而不是div，但似乎没有任何效果。

包含行为不当的<div>的{{1}}在包含目标元素的<a>出现在文档中时完全关闭。我不认为在浏览器解析<div>的时间点没有定义目标元素存在问题。

手动将“＃bundle_product_anchor_448”添加到URL确实有效。

我知道由于我无法轻易解决的大量因素，该页面在大量点上无法进行HTML验证。我认为这个基本的'跳转到命名元素'功能应该可以正常工作。除了这个小小的导航怪癖之外，该页面功能完全正常。

有人有任何线索吗？

Answer 1

尝试从页眉中删除<base href="http://www.premierrange.co.uk/"></base>。

<base>标记用于指定网页上所有相对网址（不说http://www.example.com/ ...的网址）的基本网址或目标。没有它，您的链接应该按预期运行，但您可能必须修复其他链接以适应此更改。

Answer 2

在应用程序中使用<base>标记时，最好的方法是在哈希之前使用绝对URL，绝对URL指向您所在的同一页面。

因此，假设您在“http://example.com/products/curved-glass”页面上，而不是

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

您需要在哈希值之前包含绝对当前URL：

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

在大多数环境中查找当前URL是一项微不足道的任务，此方法还可以避免删除<base>标记，这可能会对您应用程序的其他区域产生负面影响。

锚标签跳到哈希不工作

2 个答案: