javascript - 元素仅在检查元素后出现

Question

我刚刚遇到了我在卑微的网络开发自由职业生涯中遇到的最奇怪的问题。我正在为求职网站构建一个 Web 应用程序，申请人可以在该网站上使用他们的网络摄像头回答 3 个简短的问题。为此，我使用了一个名为 ScriptCam 的 jQuery 插件。它使用 Flash 来激活用户的网络摄像头。我让这一切工作得很好，但现在我遇到了以下问题。

我使用 jQuery .show()和 .hide()显示和隐藏按钮。一个按钮，一个重播按钮，在调用$("#replay").show();时不显示但是当我在调用此命令后右键单击浏览器中的任意位置并点击“检查元素”时会显示!我一直在寻找可能导致此问题的原因，但没有找到任何东西...可能导致此行为的原因是什么？

我是这样定义按钮的:

<div onclick='replay();' id='replay' class="replay">Replay</div>

这是按钮的 CSS:

.replay{
    float: left;
    top: 150px;
    left: 60px;
    z-index: 100;
    -webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
    background:url('../img/button-grey.png') no-repeat 100% 100%;
    background-position: center center;
    color: white;
    width: 140px;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-family: Archive;
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

编辑:这是按钮的父 div 的 CSS:

.box{
    margin-left: 100px;
    height: 337px;
    width: 300px;
    float: left;
    text-align: center;
}

我没有在任何地方使用任何延迟，按钮真的只在我点击浏览器某处的检查元素后才出现。我也无法在其他任何地方重现此问题。任何人都知道是什么原因造成的？任何帮助将不胜感激，提前致谢!

更新:似乎只有 Mac 上的 Safari 有问题。

更新 2:当将按钮从它的父 div 移到 body 标签的正下方时，它可以正常工作!所以这可能是父 div 的 css 冲突？

编辑:您可以实时查看问题 here ，只需点击“Volgende vraag”按钮，等待小视频播放完毕。之后，重播按钮应该会出现在视频的正上方。

Answer 1

我找到了解决方案!该问题是由具有 CSS display:none 的早期容器 div 引起的。虽然我在问题发生之前用 jQuery 的 .show() 更改了它并且它的内容可见，但在我的 CSS 中删除 display:none 使其工作!感谢您提供的所有帮助和建议!