Javascript 只有在检查元件后，元件才可用

我刚刚遇到了一个最奇怪的问题，这是我在从事网络开发自由职业时遇到的。我正在为一个求职网站构建一个web应用程序，求职者可以使用他们的网络摄像头回答3个简短的问题。为此，我使用了一个名为jQuery的插件，它使用Flash来激活用户的网络摄像头。我有这一切工作刚刚好，但现在我有以下问题

我使用jQuery

.show（）

和

.hide（）

来显示和隐藏按钮。调用

$（“#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 element之后，按钮才会真正出现。我也无法在其他任何地方重现这个问题。有人知道这是什么原因吗？任何帮助都将不胜感激，提前感谢

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

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

编辑：你可以现场看到问题，只需点击“Volgende vraag”按钮，等待小视频完成。之后，重播按钮应该出现在视频的正上方。
我找到了解决方案！该问题是由较早的容器div引起的，该容器div具有CSS
display:none
。虽然我在问题发生之前用jQuery的
.show（）
改变了这一点，但在CSS中删除
display:none
可以让它工作！感谢所有的帮助和建议
 对于我来说，我必须改变我在样式表中发现的隐藏在图像上方的元素的可见性，以解决这个问题。我使用inspect元素找到了它。
更改后，图像明显上移，因此我必须更改边距以将其更改回原始位置。
请同时发布您的jQuery代码，如果可能，请发布一个带有示例的JSFIDLE，以便我们看到问题。这听起来像是一个重绘问题。如果调整页面大小，是否也能正常工作？渲染问题。。。这可能是一个浏览器bug@AhmadAlfy你可能是对的，这个问题只出现在Safari中，而不出现在Chrome或Firefox中！但这仍然是个问题。。。有没有办法解决这个问题？这个按钮的父元素是什么？那个家长的CSS是什么？我想这可能是因为子元素依赖于父元素的CSS，而父元素依赖于子元素的CSS。我也有同样的问题，但没有找到display:none。。我从github得到了一个lightslider，然后我发现了同样的问题。。梦魇太感谢你发布这个答案了，我快疯了。我认为这是在使用较旧版本的jquery时发生的。在v2+上，它可以找到隐藏的元素。“最终修复了它”肯定不是未来读者会告诉你的答案。所以：如果你真的想跟上这个答案：考虑改进它；否则它对任何人都没有多大帮助，应该被删除#