Question

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

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

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

<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移到身体标签的正下方时，它可以正常工作！所以它可能是父div的css冲突？

编辑：您可以直接看到问题here，只需按下按钮＆＃34; Volgende vraag＆＃34;等待小视频完成。之后，重播按钮应出现在视频正上方。

Answer 1

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

Answer 2

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

元素仅在inspect元素后出现

2 个答案: