锚点在不同的浏览器上有不同的位置

Question

我正在尝试创建一个直接链接到不同页面的某个部分的链接。这就是我正在做的事情。

1. 我使用name属性创建一个锚点：

   <a name="fish"></a> <p>some content....</p>

2. 我创建了一个＃添加到最后的链接 ＆＃34; http://example.com#fish＆＃34;

***注意我也尝试过id方法而不是名字，这仍然给我带来同样的问题。

示例：<div id="fish"></div>

功能正常，它带我到页面上的特定部分，唯一的问题是它在不同的浏览器上看起来不同。 firefox显示的内容比Chrome显示屏高出约5英寸。

Answer 1

这可能是因为a标签占用了一些空间。

最简单的解决方案，改为使用id。

<p id="fish">some content....</p>

确保下面有足够的内容，以便滚动

Answer 2

大多数浏览器对于常见的html元素具有相同的css默认值，但是某些元素可能具有不同的填充和边距属性值。

避免这些差异的一种方法是在css语句中明确应用这些值。

p {margin: 10px 0px}

如果您不想这样做，我建议您将链接完全放在文本所在的位置。

<p><a name="fish"></a>some content....</p>

您可以在任何地方找到链接，因为锚元素在视口中不可见