<button>在Chrome中工作，但不在Firefox中 - 为什么？

问题描述：

我有几个按钮，这样创建了HTML页面上：<button>在Chrome中工作，但不在Firefox中 - 为什么？

<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是无效的，但是如果你真的想使用该按钮，你可以做一个时髦的解决办法'' – Azrael 2014-10-06 09:45:05

并且这会适用于所有浏览器，还是仅使用一个锚点而不使用按钮会更好？ – elulle 2014-10-06 09:48:13

是的，因为它只是一个表单完成后的重定向表单（按钮单击）**编辑：**我的意见是，锚标签仍然会更好，但是如果你不想定制你的按钮，这将我猜想是实现它的一种方式。 – Azrael 2014-10-06 09:48:35

答

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

如果您想链接某处，请使用锚点。
如果您想提交表单，或者拥有一个除了运行JavaScript之外什么也不做的控件，请使用按钮。

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

你能否给我举个例子，说明在这种情况下如何使用锚？ – elulle 2014-10-06 09:47:20

'Read more'。 – Quentin 2014-10-06 09:52:12

答

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

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

其中REDIRECTURLHERE将是把您的目标网址中的位置，以及按钮上的文字输入按钮所处的位置文本。

答

您使用Button和Anchor标记的方式是无效的。

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

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

如果你想提交表单，那么你必须使用提交输入类型。

答

我也遇到过问题，按钮在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" 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; 
}

在Chrome中工作，但不在Firefox中 - 为什么？

相关推荐