<button>在chrome中工作但在Firefox中没有 - 为什么?</button>

时间:2014-10-06 09:42:16

标签: html firefox button href mozilla

我的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(例如下划线和字体颜色)

4 个答案:

答案 0 :(得分:5)

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

  • 如果您想在某处链接,请使用锚点。
  • 如果您想提交表单,或者控件除了运行JavaScript之外什么都不做,请使用按钮。

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

答案 1 :(得分:0)

正如昆汀所说,您的HTML无效。如果你真的想使用默认按钮作为重定向,你可以创建一个这样的解决方法:

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

其中REDIRECTURLHERE是放置目标网址的位置,BUTTON TEXT是输入按钮文字的位置。

答案 2 :(得分:0)

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

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

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

如果您希望提交表单,则必须使用提交输入类型。

答案 3 :(得分:0)

我也遇到过问题,按钮在Chrome中工作正常但在Mozilla火狐中没有。我在代码中做了以下更改,然后它在两个浏览器中都正常工作。

旧代码:

  <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" width="18px" 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;
}