<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（如下劃線和字體顏色）

來源

2014-10-06 elulle

你的HTML是無效的，但是如果你真的想使用該按鈕，你可以做一個時髦的解決辦法'<形式行動=「REDIRECTURLHERE」>' – 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使其看起來像你想要的樣子。

來源

2014-10-06 09:43:36 Quentin

你能否給我舉個例子，說明在這種情況下如何使用錨？ – 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將是把您的目標網址中的位置，以及按鈕上的文字輸入按鈕所處的位置文本。

來源

2014-10-06 09:48:10 Azrael

您使用Button和Anchor標記的方式是無效的。

您可以使用ANCHOR標籤進行重定向，也可以使用以下輸入按鈕。在單擊此按鈕，將不會提交表單：

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

如果你想提交表單，那麼你必須使用提交輸入類型。

來源

2014-10-06 09:50:12 addicted20015

我也遇到過問題，按鈕在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; 
}

來源

2016-11-16 09:19:27 hemachandra

<button>在Chrome中工作，但不在Firefox中 - 爲什麼？

回答

相關問題