按钮在 chrome 上工作，但在 Firefox 上不工作答案

【问题标题】：Button working on chrome but not on firefox按钮在 chrome 上工作，但在 Firefox 上不工作
【发布时间】：2018-06-14 19:15:02
【问题描述】：

我用 HTML 制作了一个在 Google Chrome 上运行良好但在 Firefox 上完全没有反应的按钮。

我的代码：

function fbs_click() {
  var u = location.href;
  var t = document.title;
  window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t) + '&s=' + encodeURIComponent(CQuote + CAuthor), 'sharer', 'toolbar=0,status=0,width=626,height=436');
}


function rSign() {
  var test = Math.random();
  return test > 0.5 ? 1 : -1;
}
var CQuote = "",
  CAuthor = "";

function getQuote() {
  $.ajax({
    jsonp: "jsonp",
    dataType: "jsonp",
    contentType: "application/jsonp",
    url: "https://api.forismatic.com/api/1.0/?",
    data: {
      method: "getQuote",
      lang: "en",
      format: "jsonp",
    },
    success: function(quote) {
      //  document.getElementById("quote").innerHTML =  
      CQuote = quote.quoteText;
      // document.getElementById("author").innerHTML = 
      CAuthor = quote.quoteAuthor;
      document.getElementById("author").innerHTML = CAuthor;
      document.getElementById("quote").innerHTML = CQuote;
    }

  });
}


$(document).ready(function() {
  getQuote();
})


var background = document.getElementById('backimg');
var huetarget = 0;
var huecurrent = 0;
var bright = 1;

function abyssmal() {
  background.style.filter = 'hue-rotate(' + huecurrent + 'deg) ';
  if (huecurrent < huetarget) {
    huecurrent += Math.abs(huetarget - huecurrent) / 20
  }
  if (huecurrent >= huetarget) {
    huecurrent -= Math.abs(huetarget - huecurrent) / 20
  }
}
var interval = setInterval(abyssmal, 25);

$("#btnAnimate").on("click", function() {
  huetarget += (Math.random() * 50 + 50) * rSign();
  getQuote();
});

$('#tweet').on("click", function() {
  window.open("https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent('"' + CQuote + '"   -' + CAuthor), "_blank")
});

$('#facebook').on("click", function() {
  fbs_click();

});

/*#myDiv{
  background-color: green;
  transition : background-color 2s,opacity 2s;
    
}

#myDiv:hover{
    background-color : red;
  opacity : 0.5
  
} */

#quotebox {
  font-size: 30px;
  height: auto;
}

#authorbox {
  text-align: right;
}

.box {
  height: auto;
  margin: auto;
}

#btnAnimate {
  width: 150px;
}

.share {
  width: 50px;
  float: right;
}

.button {
  height: 50px;
  padding: 0px;
  vertical-align: middle;
  margin-top: 40px;
  color: white;
  background-color: #333c5b;
  border-radius: 3px;
  border: none;
}

button:hover {
  opacity: .8;
}

.background-tile {
  background-image: url(https://image.noelshack.com/fichiers/2017/51/3/1513771628-background-1.jpg);
  background-size: 1500px 900px;
  height: 900px;
  width: 1515px;
  padding-top: 270px;
  z-index: -1;
}

#backimg {
  filter: hue-rotate(0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="background-tile" id="backimg">
  <div class="box" id="myDiv" style="padding : 50px 50px 10px 50px;width : 45%;border-radius: 5px; background-color : #476870">
    <div id="quotebox">
      <i class="fa fa-quote-left" style="font-size:40px;margin-left : 8px "></i>
      <span id="quote"></span>
      <p id=a uthorbox>-<span id="author"></span>
        <p>
    </div>

    <button class="button quotebutton" id="btnAnimate">get quote</button>
    <button class=" share button fa fa-facebook" id="facebook"></button>
    <button class=" share button fa fa-twitter" id="tweet" style="  margin-right: 25px;"></button>
  </div>
</div>

我仔细检查了按钮内只有短语元素。

问题：为什么按钮在 Firefox 上没有反应。

【问题讨论】：

标签： javascript jquery html css firefox

【解决方案1】：

您将所有内容放在#backimg 中，它有z-index: -1，因此将其所有内容发送到其父级下方，即<body>。这意味着，即使可见，您的内容也位于不可见的点击捕捉器 (<body>) 下方。

Firefox 似乎应用了z-index，虽然，AFAIK，该元素应该是position-ed（将position 值设置为除static 之外的任何值，这是默认值）适用于z-index . Chrome 不应用它，因为#backimg 有隐含的position:static。

在打开 #mydiv 之前关闭 #backimg 可以解决问题并使您的 HTML 有效。目前还不清楚您的布局应该是什么样子，但这是我修复它的尝试：https://codepen.io/anon/pen/ZvXXqP

你的笔的另一个问题是它在 Bootstrap 的 JavaScript 之后加载 jQuery，这需要 jQuery。

【讨论】：

哦，是的！我完全忘记了“z-axis = -1”线，不知道我怎么会错过它。非常感谢！

【解决方案2】：

跨浏览器不支持某些 HTML 方法。

例如，某些功能可以在 Mozilla 和 Internet Explorer 上运行，但不能在 Chrome 上运行。

但是，在这种情况下，它表明 BODY 标记与您的内容重叠。这可能是 Mozilla 的错误，尤其是 Codepen.io，因为 W3schools 已验证按钮功能在此浏览器上有效。

【讨论】：

你在他的 HTML 中哪里看到了<body> 标签？
我打开了两个浏览器并右键单击按钮打开“检查”。它会在打开时突出显示焦点以及与之对应的 DIV。在 Chrome 中，它没有 BODY 重叠。在 Mozilla 中，确实如此。它专注于 Chrome 中的按钮，在打开它时，它会在焦点代码上闪烁特定的颜色。 Mozilla 的第一个重点是身体。就个人而言，我认为这是服务端的错误，而不是您的代码。
不是codepen特有的。我将他的codepen复制到问题中的堆栈sn-p中，它在FF中不起作用。