按钮适用于Chrome，但不适用于Firefox

Question

我在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上没有反应。

Answer 1

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

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

但是，在这种情况下，这表明BODY标签与您的内容重叠。 Mozilla尤其是Codepen.io可能与Mozilla错误，因为W3schools验证了按钮功能可在该浏览器上正常工作。

Answer 2

您将所有内容放置在#backimg ，该文件的z-index: -1所有内容都发送到其父对象<body> 。 这意味着，即使可见，您的内容也位于不可见的点击捕捉器（ <body> ）下面。

Firefox似乎应用了z-index ，但是，对于AFAIK来说，该元素应进行position （ position值设置为除static以外的任何值，默认为static ）才能应用z-index 。 Chrome不会应用它，因为#backimg具有隐式position:static 。

在打开#backimg之前关闭#backimg #mydiv解决此问题并使HTML有效。 目前尚不清楚布局的外观，但是我尝试对其进行修复： https : //codepen.io/anon/pen/ZvXXqP

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

按钮适用于Chrome，但不适用于Firefox

问题描述

2 个解决方案

解决方案1
0 2018-01-05 00:56:30

解决方案2
0 2018-01-05 01:15:11

按钮适用于Chrome，但不适用于Firefox

问题描述

2 个解决方案

解决方案1 0 2018-01-05 00:56:30

解决方案2 0 2018-01-05 01:15:11

解决方案1
0 2018-01-05 00:56:30

解决方案2
0 2018-01-05 01:15:11