工作,我有一個按鈕內的兩個鏈接,但鏈接似乎並不在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和重定向 - 即使這是行不通的。
工作,我有一個按鈕內的兩個鏈接,但鏈接似乎並不在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和重定向 - 即使這是行不通的。
這不起作用,因爲it is not allowed by HTML5:
內容模型:段落式內容,但必須有沒有互動 內容的後裔。
Interactive content means any of the following elements:
一個音頻(如果該控件屬性存在)按鈕細節嵌入 的iframe IMG(如果USEMAP屬性存在)輸入(如果該 類型屬性不是在隱藏狀態)密鑰生成標籤菜單(如果 類型屬性是在工具條狀態)對象(如果USEMAP屬性是 存在)選擇textarea的視頻(如果該控件屬性存在)
如果它在某些瀏覽器的工作,它只是因爲他們正試圖 玩畸形標記不錯,並提供一些某種有意義的結果的。
換句話說:重寫你的HTML,它是一個爛攤子。如果你想讓鏈接看起來像是在一個按鈕中,把它們放在一個div
元素和樣式看起來像一個,而不是濫用語義錯誤的元素。
太棒了!太好了!太好了! –
也許通過解釋什麼時候和爲什麼
@deji這是不正確的 - 互動內容從來不被允許。文字和圖像不是互動的。 –
<a>
is not allowed inside <button>
段落式內容,但必須有沒有交互式內容後裔。
<a>
是交互式內容(不管它是否有明顯的href
,但是你的確如此)。因此,您不能依賴鏈接作爲按鈕的子項,並且Firefox所做的是正確的。使用一個新元素,包含<a>
小號
我有一個按鈕內的兩個鏈接,但[...]
「是的,但讓我停,你就在那裏......」
http://www.w3.org/TR/html5/forms.html#the-button-element :
4.10.8按鈕元素內容模型:短語內容,但不能有interactive content後裔。
--->
交互式內容是專門用於用戶交互的內容。 ⇒一個,音頻[...]
所以,如果你正在寫無效HTML,期待意外的行爲;-)
+1:我會用「expect the unexpected」來結束這句話::) – naveen
這是無效的HTML,
做這樣的事情,而不是:
<ul>
<li><a href="#">Log in</a></li>
<li><a href="#">Sign up</a></li>
</ul>
已經由[Niels]建議(http://stackoverflow.com/a/17253457/499214) –
您可以將其添加到按鈕元素中。
的onclick = 「window.location.href = '/鏈路1'」
例
<button onclick="window.location.href='/login'">Login</button>
或者,你可以把按鈕的錨點,它不會有確切相同的外觀,因爲它會是兩個不同的按鈕,但它將是一個按鈕,充當鏈接。它仍然不是技術上正確的,但它確實在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>
使用javascript:window.location作爲按鈕。
<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>
媽媽咪呀..在這裏我又來了......爲什麼,爲什麼你有沒有想過讓這個標記... :) – naveen
不 - 你不能有其他的內部「互動」的元素。它有時可能在某些瀏覽器中有效,但這是錯誤的。 – Pointy