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>元素。元素的definition明确排除了它们：

<!--
 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

我有类似的情况并在此处发布了我的问题=＆gt; Why does Dreamweaver cc16, Bootstrap v3.3.6, created, hyperlinked Button work in Opera & Chrome but not IE or Firefox?

以下是我对Button =＆gt;

的原始代码

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通常使用：=＆gt;

链接

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

虽然在Chrome和Opera中有效，但IE或Firefox却没有，但显然它不适用于任何浏览器。

以下是我将Button代码元素更改为=＆gt;

的内容

`<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属性。不同的浏览器采用不同的类型，例如，不一定要键入=＆＃34;提交＆＃34;。

按钮链接在Firefox，IE中不起作用

5 个答案: