Anchor標記不能在Firefox和Chrome中工作

我正面臨一個令人驚訝的問題。我在客戶端網站上的圖像上有超鏈接。它在IE中工作，但當我在Chrome/Mozilla中打開相同的頁面時，它不顯示錨點指針，點擊時也沒有任何反應。我的鏈接代碼是Anchor標記不能在Firefox和Chrome中工作

<a href="Home.aspx?ModuleID=1"> 
    <img src="Images/Logo.gif" border="0"/> 
</a>

有人知道這個問題是什麼嗎？

來源

2011-02-03 surenv2003

如果沒有完整的HTML源代碼，我會指出這個錨點是嵌套的，或者是一些沒有結束標記的元素之後。

如果這不是問題，發佈的HTML代碼完整。

您可以通過驗證您的文檔輕鬆找到這個問題：

http://validator.w3.org/

這是W3C官方HTML/XHTML驗證，因此，如果某個元素不是封閉的，它會指出哪一個你需要糾正！

編輯：看到你的HTML源代碼張貼在答案的評論...文檔類型（DOCTYPE）聲明在哪裏？你忘了添加它！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

當你不提供文檔類型，瀏覽器顯示網頁中的「quircks」模式，這是可能不會呈現兼容模式：

在HTML文檔的開頭添加這你的頁面如你所料。瞭解更多關於在這裏：

http://en.wikipedia.org/wiki/Quirks_mode

讓我知道如果這能解決您的問題！

來源

2011-02-03 09:51:03

我檢查了http://validator.w3.org/沒有檢測到未封閉的標籤。只要連接到服務器，我就可以共享整個代碼 – surenv2003 2011-02-03 11:45:00

由於用戶限制，無法發佈整個代碼 – surenv2003 2011-02-03 12:11:08

嚴正，請使用http://pastebin.com/併發布評論和鏈接！ ;） – 2011-02-03 12:12:57

檢查您是否在頁面中使用css z-order。不正確的z順序可能會導致按鈕和鏈接不起作用。

來源

2011-12-08 21:37:37 Sean

我面臨同樣的問題。 This suggestion（加入的位置：相對到包含div）似乎應付它，但我正在做絕對定位，需要以另一種方式解決此問題。不過，我想它可能會幫助其他人。

來源

2011-12-27 23:54:18 cdonner

簡單的解決方法：這個作品在我測試了使用至今的所有瀏覽器document.getElementById([anchor tag]).scrollToView(true);

例子： --from--

<a href="#" onclick="document.getElementById('ShowMeHow2').scrollIntoView(true);return false;">

--to--

<a id="ShowMeHow2" name="ShowMeHow2"> </a>

來源

2012-02-21 16:35:01

我有一個類似的情況。就我而言。我正在嘗試使用左/右花車對齊3個div。其中一個有位置：相對屬性。一旦我刪除了這個，然後Firefox的錨標籤工作。而不是添加額外的屬性。希望這可以幫助其他人。

來源

2012-06-15 00:27:10 Farjad

我發現有時候您可能會錯誤地使用相同ID的其他元素。在我的情況下，它是一個選項標籤，不能移動到視圖中。因此，我建議您嘗試$('#yourid')以查看是否有任何標籤意外地具有相同的ID。

來源

2013-05-09 17:34:24

我發現只針對與Chrome *相同的問題，我的工作是不將封閉標識封裝在塊級元素中，而是附上標註。

ex。

<body> 
    <a id="top" name="top"> </a> 
    <p>...</p> 
    <p><a href="#top">Back to Top</a></p> 
    </body> 
    <!-- /end ex. -->

希望這有助於:)在所有瀏覽器中都能正常工作。

-Ben

來源

2014-01-25 19:28:43

我已經花了幾個小時，這個問題，在頁面錨標籤在Firefox和IE的工作，但沒有鉻。我不是一個專業的開發人員，所以我不知道爲什麼，但看起來在某些情況下，chrome不會從堆疊的div中讀取標籤，並將您發送到同一頁面上的所需位置。我繞着它通過添加一個跨度的ID我一個ID後面... - 所以它看起來是這樣的：

<a href="#ID_NAME"></a> 
... 
<a id="ID_NAME><a/><span id="ID_NAME"></span>

在Firefox，Chrome和Safari瀏覽器進行測試。儘管這臺機器上沒有IE來測試。

來源

2014-04-10 07:26:44 Tim

可能發生的另一個可能的問題（儘管這可能不是這種情況）是你可以改變a標籤的css指針聲明，例如。

a { 
    cursor: default; 
}

如果是這種情況，懸停效果和點擊鏈接應該仍然有效。

來源

2014-06-11 22:28:34

它看起來很愚蠢，但我曾經有過同樣的問題。我只是將錨鏈接放在現有頁面中作爲增強功能的一部分。顯然鏈接在IE中可點擊，但在Chrome/Firefox中無法點擊。

一旦仔細查看，我發現有一個現有的腳本可以刪除打印功能的定位標記鏈接。添加的錨標籤是同一頁的一部分，因此存在此問題。我添加如果條件與新添加的錨的ID，以便他們將跳過添加的功能刪除錨的鏈接。

來源

2014-07-29 22:56:48

不要把＃字符錨泊，只是在鏈接

Correct <a name="top">[top of page]</a> <a link="#top">[link]</a> 

Incorrect <a name="#top">[top of page]</a> <a link="top">[link]</a>

來源

2015-08-18 16:53:31

對於Firefox，在頁面的HEAD部分應用此腳本。

<script> 
    $(document).ready(function(){ 
     var h = window.location.hash; 
     if (h) { 
      var headerH = $('#navigationMenu').outerHeight(); 
      $('html, body').stop().animate({ 
       scrollTop : $(h).offset().top - headerH + "px" 
      }, 1200, 'easeInOutExpo'); 

      event.preventDefault(); 
     } 
    }); 
</script>

對於Chrome，請在頁面的HEAD部分使用以下內容。

<script> 
    $(document).ready(function() { 
     var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); 
     if (window.location.hash && isChrome) { 
      setTimeout(function() { 
       var hash = window.location.hash; 
       window.location.hash = ""; 
       window.location.hash = hash; 
      }, 300); 
     } 
    }); 
</script>

只需將腳本複製並粘貼到頁面的HEAD部分即可。它爲我工作！ :)

來源

2017-01-29 18:16:31 sammy

我在Chrome中遇到了類似問題，其中當光標在我的導航鏈接上懸停時並未更改爲指針，並且鏈接本身在單擊時沒有響應。通過在我的樣式表中添加一個值爲999的z-index屬性到我的錨點元素，返回預期的行爲。

來源

2017-02-20 12:55:39

Anchor標記不能在Firefox和Chrome中工作

回答

相關問題