使用Bootstrap按钮时Firefox中链接无法点击

Question

在构建我的WordPress网站时，我遇到了一个奇怪的问题。在Firefox浏览器中，所有位于Bootstrap按钮内部的链接都无法正常工作。

这是什么原因导致的呢？

以下是HTML输出：

<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
    All News
</a>
</button>

这是 CSS 的代码:

.home #primary #home-more .btn {
background-image: url("../img/home-button-sprite-more.png");
background-repeat: no-repeat;
margin-right: 0px;
background-color: transparent;
padding: 13px 40px;
background-position: 20px 0px;
}
button.btn {
display: inline-block;
padding: 13px 24px; 
margin-bottom: 0px;
margin-right: 10px;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: medium none;
border-radius: 0px 0px 0px 0px;
white-space: nowrap;
-moz-user-select: none;
}

- Bojana Šekeljić

---

你说的“不活跃”是什么意思？ - Josh Crozier

@JoshC 我的意思是它不起作用，当你点击它时，它不会带你到页面。 - Bojana Šekeljić

可能与CSS无关。这是HTML的结构问题。也许链接已更改，或目录已移动...只是一些建议。 - Josh Crozier

在<button>元素内部放置<a>元素是无效的，规范在此指出button元素内不能有任何交互式内容的后代元素。 - omma2289

@JoshC 这些链接是动态创建的，与其他有效链接的唯一区别在于它们位于上述 CSS 内的 button 标签内... 仅限于火狐浏览器... 真奇怪。 - Bojana Šekeljić

Answer 1

不再使用，

<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
    All News
</a>
</button>

您需要使用以下内容：

<a href="http://domain.dev/?cat=4" name="View all News">
  <button class="btn pull-right" role="button">
    All News
  </button>
</a>

或者，

<a href="http://domain.dev/?cat=4" title="View all News" class="btn pull-right">
    All News
</a>

- Anshad Vattapoyil

---

为什么会发生这种情况？或者这两个代码有什么区别？ - akashrajkn

Answer 2

尝试@Devo建议的，否则尝试这个。

<a class="btn btn-primary" href="http://domain.dev/?cat=4">All News</a>

希望这有所帮助。

- jayeshkv

Answer 3

使用这个：

<div class="btn pull-right" role="button">
  <a href="http://domain.dev/?cat=4" name="View all News">
      All News
  </a>
</div>

我认为它应该可以工作

- basha

---

请使用以下代码：<div class="btn pull-right" role="button"> <a href="http://domain.dev/?cat=4" name="View all News"> 所有新闻 </a> </div> - basha