带有引导按钮的 Firefox 中的链接无效

Posted 2023-03-06

【中文标题】带有引导按钮的 Firefox 中的链接无效

【英文标题】：Links not active in firefox with bootstrap buttons

【发布时间】：2013-10-13 14:57:54

【问题描述】：

我在构建我的 wordpress 网站时遇到了一个奇怪的问题。引导按钮内的所有链接在 Firefox 中都不是活动的。

是什么原因造成的？

这是 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;

【问题讨论】：

“不活跃”是什么意思？

@JoshC 我的意思是不工作，当你点击它时，它不会带你到页面

那时可能与CSS没有任何关系。它是 HTML 的结构。也许链接改变了，或者目录被移动了……只是一些建议。

在<button> 中包含<a> 是无效的，spec here 表示按钮元素中不能有交互式内容后代

@JoshC 链接是动态创建的，这些链接和其他工作链接之间的唯一区别是这些链接位于带有上述 css 的 button 标记内......并且仅在 firefox 中......奇怪

【参考方案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>

【讨论】：

为什么会这样？或者这两个代码有什么区别？

【参考方案2】：

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

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

希望这会有所帮助。

【参考方案3】：

使用这个：

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

我觉得应该可以

【讨论】：

使用这个： domain.dev/?cat=4" name="查看所有新闻">所有新闻