我刚刚遇到了我在发展自由职业生涯的谦逊网络中遇到的最奇怪的问题.我正在为求职网站构建一个Web应用程序,申请人使用他们的网络摄像头来回答3个简短的问题.为此,我使用一个名为
ScriptCam的jQuery插件,它使用Flash激活用户的网络摄像头.我有这一切都很好,但现在我有以下问题.
我使用jQuery .show()和.hide()来显示和隐藏按钮.调用$(“#replay”)时,不会显示一个按钮,一个重播按钮.show();但是,当我在调用此命令并点击“Inspect Element”后右键单击浏览器中的任何位置时显示！我一直在寻找可能导致这个问题的原因,但没有找到任何东西……什么可能导致这种行为？
这就是我定义按钮的方式：
< div onclick ='replay();' id ='replay'class =“replay”>重播< / div>
这是按钮的CSS：
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-Box-shadow: 0 12px 36px -16px rgba(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,只需点击“Volgende vraag”按钮等待小视频完成.之后,重播按钮应出现在视频正上方.
解决方法
我找到了解决方案！问题是由早期的容器div引起的,它具有CSS display：none.虽然我在问题发生之前用jQuery的.show()改变它并且它的内容是可见的,但在我的CSS中删除display：none使它工作！感谢您提供的所有帮助和建议！