<button> 在 chrome 中工作，但在 Firefox 中不工作 - 为啥？

Posted 2023-03-05

【中文标题】<button> 在 chrome 中工作，但在 Firefox 中不工作 - 为啥？

【英文标题】：<button> working in chrome but not in Firefox - why?<button> 在 chrome 中工作，但在 Firefox 中不工作 - 为什么？

【发布时间】：2014-11-30 13:24:20

【问题描述】：

我的 html 页面上有几个按钮，如下所示：

<button type="button" class="read-more"><a href="#">Read More</a></button>

它们在 chrome 和 Safari 中反应灵敏——它们工作得非常好。然而，当我在 mozzilla Firefox 中测试它们时，它们根本没有响应。有谁知道可能是什么问题？

我试着这样做：

<a href="#"> <button type="button" class="read-more">Read more</button></a>

这链接了按钮，但它不显示可点击的光标并且不拾取一些 css（例如下划线和字体颜色）

【问题讨论】：

您的 html 无效，但是如果您真的想使用该按钮，您可以做一个时髦的解决方法<form action="REDIRECTURLHERE"><input type="submit" value="read-more"></form>

这适用于所有浏览器还是单独使用没有按钮的锚会更好？

是的，因为它只是一个表单完成后重定向的表单（按钮单击）编辑：我认为锚标签仍然会更好，但是如果你不想自定义您的按钮，我猜这将是实现它的一种方式。

【参考方案1】：

您的 HTML 无效。使用a validator。按钮不能包含锚点，锚点不能包含按钮。不同的浏览器以不同的方式从该错误中恢复。

如果您想在某处链接，请使用锚点。 如果您想提交一个表单，或者拥有一个只运行一些 javascript 的控件，请使用按钮。

然后应用 CSS 让它看起来像你想要的那样。

【讨论】：

能否请您举个例子说明在这种情况下如何使用锚点？

<a href="full-version-of-article.html">Read more</a>.

【参考方案2】：

正如 Quentin 所说，您的 HTML 无效。如果您真的想使用默认按钮作为重定向，您可以创建如下解决方法：

<form action="REDIRECTURLHERE"><input type="submit" value="BUTTON TEXT"></form>

REDIRECTURLHERE 是放置目标 URL 的位置，BUTTON TEXT 是输入按钮文本的位置。

【参考方案3】：

您使用 Button 和 Anchor 标签的方式有点无效。

您可以使用 ANCHOR 标记进行重定向，也可以使用以下输入按钮。单击此按钮时，将不会提交表单：

<input type="button" value="Read More" class="read-more" />

如果要提交表单，则必须使用提交输入类型。

【参考方案4】：

我也遇到了按钮在 chrome 中工作正常但在 Mozilla fire fox 中无法正常工作的问题。我对代码进行了以下更改，然后它在两个浏览器中都可以正常工作。

旧代码：

  <input type="search" name="focus" class="form-control search-box" placeholder="Messages.Label.search" style="width:100%"
           ng-model="dashboardCtrl.searchvalue" ng-change="dashboardCtrl.searchChangeHandler()" required >
    <button class="close-icon" type="reset" ng-click="dashboardCtrl.removeSearchTab()"></button>
    <img ng-src="/assets/images/search-icon.svg"  style="position:relative;left: 90%;top: -30px"  ng-show="dashboardCtrl.searchvalue === undefined"/>

新代码： 我将上面的按钮更改为 div 和 css 保持与下面相同。

.search-box,.close-icon 
   position: relative;

.search-box 
   border: 1px solid $color_nobel_approx;
   outline: 0;
   border-radius: 0px;
   padding-right:22px;
   margin-top: 3px;
   width: 190px;
   box-sizing: border-box;
  -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
 
 .search-box:focus 
    box-shadow: 0 0 2px 2px $color_azure_radiance_approx;
    border: 1px solid #bebede;
    width: 100%;
 
 .close-icon 
   border:1px solid transparent;
   background-color: transparent;
   display: block;
   outline: 0;
   cursor: pointer;
   right: -94%;
   top: 2px;
   height: 0px;
 
.close-icon:after 
  content: "X";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index:1;
  right: 5px;
  top: -30px;
  margin: auto;
  padding: 2px;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;

.search-box:not(:valid) ~ .close-icon 
  display: none;