按鈕鏈接在Firefox，IE中不起作用

Question

我在Chrome中的鏈接工作正常，但不是IE或Firefox。 如果點擊它們就沒有任何反應。 我已經搞亂了CSS（包括z-index），但我沒有想法。 這是來自Drupal的XHTML。

html看起來像這樣：

<div class="product-display-block-link">
  <button>
    <a href="/checkout/outfield-banner/1">Add to cart</a>
  </button>
</div>

我可以看到哪些建議？

Answer 1

該HMTL語法不允許的a一個內元素button元素，所以這並不奇怪，它不跨瀏覽器工作。 應該沒有理由使用這樣的構造，因為您可以將鏈接設置為看起來像按鈕，或者將操作與按鈕關聯，具體取決於您希望完成的操作。

Answer 2

如果你想要一個按鈕（即提交帶有或懸掛JavaScript的表格的東西），請使用按鈕。 如果您想要鏈接，請使用鏈接。 如果您想要一個看起來像按鈕的鏈接，請使用鏈接，然后將其設置為您想要的樣式。

你不能混合這兩個因為<button>元素不允許包含<a>元素。 元素的定義明確排除了它們：

<!--
 Content is %Flow; excluding a, form and form controls
--> 
<!ELEMENT button %button.content;>  <!-- push button -->

<!ENTITY % button.content
   "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
    table | %special; | %fontstyle; | %phrase; | %misc;)*">

Answer 3

<button>未正確使用。

HTML：

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

在這里看到它： http ： //jsfiddle.net/s8jtf/

Answer 4

我有類似的情況，並在這里發布我的問題=> 為什么Dreamweaver cc16，Bootstrap v3.3.6，創建，超鏈接Button工作在Opera和Chrome但不是IE或Firefox？

這是我原來的Button =>代碼

The Button html code is: =>

<div align="center" style="font-size: 1.5em"> <button type="button" class="btn btn-lg"> <a href="https://howtoliveoffthegridnow.com/wordpress/get-your-own-off-the-grid-checklist/" title="Access option to download checklist"><strong>FREE: 11 Things To Know Before Going Off The Grid</strong></a> </button> </div>

相關的bootstrap.css v3.3.6通常使用：=>鏈接

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />

這雖然適用於Chrome和Opera，但不適用於IE或Firefox，顯然，它不應該適用於任何瀏覽器。

這是我將Button代碼元素更改為=>的內容

`<div class="btn btn-lg" style="background-color:#ffffff;">
 <a href="https://howtoliveoffthegridnow.com/wordpress/get-your-own-off-the-grid-checklist/" title="Access option to download checklist"><strong>FREE: 11 Things To Know Before Going Off The Grid</strong></a>

這適用於所有瀏覽器。 / PSB

Answer 5

此外，缺少類型屬性。 不同的瀏覽器采用不同的類型，例如，不一定是type =“submit”。