按钮在 Firefox 中不起作用，但在 Chrome 中起作用答案

【问题标题】：Button not working in Firefox but does in Chrome按钮在 Firefox 中不起作用，但在 Chrome 中起作用
【发布时间】：2019-02-09 07:45:46
【问题描述】：

我正在开发我制作的 ReactJS 应用程序。这是deployed version，以便更好地了解问题。

登录按钮在 Firefox 中的Inventory Login 部分不起作用。渲染的 HTML 将其显示为一个按钮，上面有一个侦听器。因此它应该工作。

在 StackOverflow 上咨询有关 Firefox 中按钮的各种答案和解决方案，尤其是在使用 JSX 时没有产生任何结果。我很确定这不算作交互式内容，仍然可以视为here 所列的措辞。

这是运行 Inventory Login 的代码 sn-p。

import React from "react";

const Login = props => (
  <nav className="login">
    <h2>Inventory Login</h2>
    <p>Sign in to manage your store's inventory.</p>

    <button className="github" onClick={() => props.authenticate()}>
      Log In With GitHub
    </button>
  </nav>
);

export default Login;

props.authenticate() 正在调用 App.js 中的一个函数，该函数通过 Firebase 处理身份验证。我已经验证它可以在 Chrome 上运行，并且 prop 正在通过。

独特之处在于 - 另一个按钮 ORDER RESET 正在不同的组件，但代码几乎相似。

这是完整的源代码 - https://github.com/vipulgupta2048/react-cotd

【问题讨论】：

任何来自 Firefox 控制台的错误消息？
我做了一个快速检查，看起来 transform-style: preserve-3d; 是罪魁祸首。请注意，当您尝试在 FF devtools 检查器中使用 Ctrl+Shift+C 选择元素时，您无法选择按钮，它只允许选择容器 div。我建议提出静态 HTML 布局并重新提出问题，因为这主要是 HTML/CSS 问题。
@estus 是的，我确实注意到了。不明白为什么要这样做。感谢您的帮助，我会尽力执行您的建议。
@Abestrad 不，我也检查过了。

标签： javascript reactjs firefox jsx

【解决方案1】：

似乎.catch-of-the-day > :last-child 中的 CSS 属性 rotateY(10deg) 使按钮在 Firefox 上不可点击。

【讨论】：

是的！这样就成功了，但是您是如何调试的。我真的很感兴趣，你认为如何解决它？另外，我需要处理我的 CSS。