元素apear仅在检查元素之后
我刚刚遇到了我在发展自由职业生涯的谦逊网络中遇到的最奇怪的问题。 我正在为求职网站构建一个Web应用程序，申请人使用他们的网络摄像头来回答3个简短的问题。 为此，我使用一个名为ScriptCam的jQuery插件，它使用Flash来激活用户的网络摄像头。 我有这一切都很好，但现在我有以下问题。
我使用jQuery .show()和.show()来显示和隐藏按钮。 调用$("#replay").show();时，一个按钮，一个重播按钮不显示$("#replay").show(); 但是当我在调用此命令并点击“Inspect Element”后右键单击浏览器中的任何地方时显示！ 我一直在寻找可能导致这个问题的原因，但没有找到任何东西……什么可能导致这种行为？
这是我定义按钮的方式：
这是按钮的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后直接移动到正文标签下方，它可以正常工作！ 所以它可能是父div的css冲突？
编辑：您可以在这里看到问题，只需点击“Volgende vraag”按钮等待小video完成。 之后，重播按钮应出现在video正上方。
我找到了解决方案！ 问题是由早期的容器div引起的，它具有CSS display:none 。 虽然我在问题发生之前用jQuery的.show()改变它并且它的内容是可见的， display:none在我的CSS中删除display:none使它工作！ 感谢所有的帮助和建议！
对我来说，我必须更改我在样式表中隐藏在图像上方的元素的可见性来修复问题。 我通过使用inspect-element找到它。 然后在更改后，图像显然向上移动，因此我不得不更改边距以将其更改回原始位置。