2013-06-22 41 views
18

工作,我有一個按鈕內的兩個鏈接,但鏈接似乎並不在Firefox上運行。鏈接不能在Firefox

<button class="btn login"> 
    <a href="/login"><b>Log In</b></a> 
      | 
<a href="/signup"><b>Sign Up</b></a> 
</button> 

我嘗試JavaScript onclick和重定向 - 即使這是行不通的。

+3

媽媽咪呀..在這裏我又來了......爲什麼,爲什麼你有沒有想過讓這個標記... :) – naveen

+1

不 - 你不能有其他的內部「互動」的元素。它有時可能在某些瀏覽器中有效,但這是錯誤的。 – Pointy

回答

33

這不起作用,因爲it is not allowed by HTML5

內容模型:段落式內容,但必須有沒有互動 內容的後裔。

Interactive content means any of the following elements

一個音頻(如果該控件屬性存在)按鈕細節嵌入 的iframe IMG(如果USEMAP屬性存在)輸入(如果該 類型屬性不是在隱藏狀態)密鑰生成標籤菜單(如果 類型屬性是在工具條狀態)對象(如果USEMAP屬性是 存在)選擇textarea的視頻(如果該控件屬性存在)

如果它在某些瀏覽器的工作,它只是因爲他們正試圖 玩畸形標記不錯,並提供一些某種有意義的結果的。

換句話說:重寫你的HTML,它是一個爛攤子。如果你想讓鏈接看起來像是在一個按鈕中,把它們放在一個div元素和樣式看起來像一個,而不是濫用語義錯誤的元素。

+0

太棒了!太好了!太好了! –

+0

也許通過解釋什麼時候和爲什麼

+0

@deji這是不正確的 - 互動內容從來不被允許。文字和圖像不是互動的。 –

9

<a> is not allowed inside <button>

段落式內容,但必須有沒有交互式內容後裔。

<a>是交互式內容(不管它是否有明顯的href,但是你的確如此)。因此,您不能依賴鏈接作爲按鈕的子項,並且Firefox所做的是正確的。使用一個新元素,包含<a>小號

6

我有一個按鈕內的兩個鏈接,但[...]

「是的,但讓我停,你就在那裏......」

http://www.w3.org/TR/html5/forms.html#the-button-element

4.10.8按鈕元素內容模型:短語內容,但不能有interactive content後裔。

--->

交互式內容是專門用於用戶交互的內容。 ⇒一個,音頻[...]

所以,如果你正在寫無效HTML,期待意外的行爲;-)

+0

+1:我會用「expect the unexpected」來結束這句話::) – naveen

0

這是無效的HTML,

做這樣的事情,而不是:

<ul> 
    <li><a href="#">Log in</a></li> 
    <li><a href="#">Sign up</a></li> 
</ul> 
+0

已經由[Niels]建議(http://stackoverflow.com/a/17253457/499214) –

2

您可以將其添加到按鈕元素中。

的onclick = 「window.location.href = '/鏈路1'」

<button onclick="window.location.href='/login'">Login</button>

-2

或者,你可以把按鈕的錨點,它不會有確切相同的外觀,因爲它會是兩個不同的按鈕,但它將是一個按鈕,充當鏈接。它仍然不是技術上正確的,但它確實在FireFox中工作。

<a href="/login"> 
    <button class="btn login"> 
    <b>Log In</b> 
    </button> 
</a> 
<a href="/signup"> 
    <button class="btn login"> 
    <b>Sign Up</b> 
    </button> 
</a> 
0

使用javascript:window.location作爲按鈕。

<div class="product"> 
<button onClick="javascript: window.location='/checkout/outfield- 
banner/1'">Add to Cart</button> 
</div>