2014-03-12 56 views
0

我的錨定標籤在IE或FF中無法正常工作。在Chrome中運行良好。幫幫我?!這是一個JSFiddle,它顯示了我正在嘗試完成的內容,並查看原始HTML的PasteBin錨定標籤在IE或FF中不起作用

我不知道如何將JQuery導入JSFiddle,所以這就是爲什麼PasteBin鏈接在那裏。

基本上,我有一個網格的人,每當它懸停時,顯示關於該職員的信息。定位標記是朝向頁面頂部的字母表中的字母。點擊時,他們應該轉到網格中以該字母開頭的名字。這在Chrome中運行正常,但不會移動到Firefox和IE的第一行。

此代碼正在Sp​​iceworks用戶門戶中使用,所以這就是HTML標籤不存在的原因。

我基本上不知道爲什麼會發生這種情況,想知道是否有人可以通過我的方式傳遞一些知識。

在此先感謝!

<!--See links in description above.--> 
+0

JSFiddle上的左邊欄名爲** Frameworks&Extensions **有一個下拉菜單,允許您t o使用任何幾個JQuery版本。默認情況下它被設置爲'無庫(純JS)'。 –

+0

非常感謝你,@ Two-BitAlchemist。猜猜我可以繞過,發現我自己。唉,我在這裏,懶惰。吃doritos。 –

回答

1

我剛剛落幕錨定到圖片元素本身(已經設置了ID)並且不使用單獨的標籤。將採取一些保養,但至少看起來是正確的。錨標籤中的非中斷空格在我的頁面上創建了一些對齊問題。這是更新後的JSFiddle,顯示了我最終的結果。

感謝您的建議,每個人。

<a id="Aanchor">&nbsp;</a> 

我用這個去在alpha標籤頂部:


在圖片的網格

取而代之的是

<a href="#AdamC">A</a> 

(該鏈接到圖片本身下方而不是一個單獨的標籤)

+1

我認爲這對你已經擁有的東西來說非常明智。你知道你可以接受你自己的答案嗎? –

3

嘗試做你的錨是這樣的:

<a id="tips">Useful Tips Section</a> 
<a href="#tips">Visit the Useful Tips Section</a> 

也有對你的錨過渡非常簡單的效果。所以當你點擊頂部的字母時,它會平滑地滾動到圖片上。值得一提的是它的一個很好的效果,並且不需要很長時間來實現。 代碼和教程 - Here

你也可以View The Demo

+1

查看我的帖子,瞭解我所走的路線。沒有足夠的代表給你一個+1 @ user2515563,但這jQuery的滾動是非常光滑的。易於實施! –

+2

自從他加倍努力之後,我會爲你+1他,並向你展示如何做所有酷派小孩在面對此事時所做的事情。 :P –

1

你的錨標籤是空的,所以一些瀏覽器都忽略它們。

如果您有:

<a name="Aanchor"></a> 

你應該嘗試,而不是:

<a id="Aanchor">&nbsp;</a> 

此外,要做到這一點較新的方法是使用的ID,因爲你還沒有命名錨。

看到這個updated fiddle我改變了#Canchor。這適用於我在Firefox上。

0

在某些瀏覽器中,您需要在錨標記中有文本才能正常工作。如果你不想在名稱錨任何事情,你可以使用非打破空間:&nbsp;

所以這個:

<a name="Aanchor"></a> 

變爲這樣:

<a name="Aanchor">&nbsp;</a>