Question

我在HTML中创建了一个可以在Google Chrome上正常运行的按钮，但对Firefox没有任何反应。

我的代码：

＆＃13;

{1: array([1, 2, 7]),
 2: array([1, 2, 5, 6, 7, 8]),
 3: array([3, 6, 8]),
 4: array([4, 7, 8]),
 5: array([2, 5, 6]),
 6: array([2, 3, 5, 6, 8]),
 7: array([1, 2, 4, 7, 8]),
 8: array([2, 3, 4, 6, 7, 8])}

＆＃13;

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();

});

＆＃13;

/*#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);
}

＆＃13;

我仔细检查了只有措辞元素嵌套在按钮内。

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

Answer 1

通过交叉浏览器不支持某些HTML方法。

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

然而，在这种情况下，它表明 BODY 标记与您的内容重叠。由于W3schools验证按钮功能适用于此浏览器，因此Mozilla特别是Codepen.io可能会出错。

Answer 2

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

Firefox似乎应用了z-index，但是，AFAIK，该元素应为position - ed（将position值设置为除static之外的任何值，这是默认）z-index申请。 Chrome不会应用它，因为#backimg具有隐式position:static。

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

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

按钮工作在chrome但不在firefox上

2 个答案: