元素仅在inspect元素后出现

Question

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

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

这就是我定义按钮的方式：

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

我没有在任何地方使用过任何延迟，只有在浏览器中的某个地方点击inspect元素后，按钮才真正出现。我也无法在其他任何地方重现这个问题。有人知道是什么原因引起的吗？任何帮助将非常感谢，提前感谢！

更新：似乎只有Mac上的Safari存在问题。

更新2：将按钮移出它的父div以直接在body标签下方时，它可以正常工作！所以它可能是父div的css冲突？

编辑：你可以看到问题直播here，只需点击“Volgende vraag”按钮等待小视频完成。之后，重播按钮应出现在视频正上方。

Answer 1

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

Answer 2

对我来说，我必须更改我在样式表中隐藏在图像上方的元素的可见性来解决问题。我通过使用inspect-element找到它。然后在更改后，图像显然向上移动，因此我不得不更改边距以将其更改回原始位置。