8

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

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

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

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

我没有在任何地方使用任何延迟，并且该按钮仅在我单击浏览器中某处的检查元素后才真正出现。我也无法在其他任何地方重现此问题。任何人都知道可能导致这种情况的原因是什么？任何帮助将不胜感激，在此先感谢！

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

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

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

4

2 回答 2

10

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

于 2013-08-15T10:41:44.127 回答
0

对我来说，我必须更改在样式表中隐藏在图像上方的元素的可见性以解决问题。我通过使用检查元素找到了它。然后在改变它之后，图像明显向上移动了，所以我不得不改变边距，把它改回原来的位置。

于 2016-12-30T13:32:08.683 回答