ReactJS 网页无法正确显示

Question

我刚刚完成了一个网页的工作，并决定使用 Yarn 在 GitHub Pages 上进行部署。 问题是当它在本地主机上运行时一切看起来都很好，但是在我的浏览器中部署的版本上有些东西没有正确显示。

我在浏览器上测试过：

1. 谷歌浏览器 86.0.4240.193
2. Safari 13.1

在两个相同的问题出现。 下面是一些在 localhost 和在线运行时的对比截图：

本地主机：

在线的：

在第二个上，我的按钮几乎看不到轮廓。 我在想我的一些 CSS 可能导致了这个，所以这里也是我对这些按钮的样式：

.button {
    width: 29vw;
    height: 40vh;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    border: 3px solid black;
    border-radius: 10px;
    outline: none;
    padding: none;
    cursor: pointer;   
    opacity: 70%;
    font-family: myFont;
    font-size: 6vh;
    color: black;
}

.button:hover {
    opacity: 100%;
    animation: swing 1s;
}

知道为什么会这样吗？ 感谢您的任何帮助。

Answer 1

在玩我的 CSS 一段时间后，我发现了问题所在并能够修复它。 事实上，我最初的想法是正确的，不透明度是导致这个问题的原因。

如果其他人有同样的问题，这里是一个快速解决方案。 只需更改：

opacity: 70%;

到：

opacity: 0.7;