元素只在检查元素之后出现 [英] Elements apear only after inspect element

问题描述

我刚刚遇到了一个奇怪的问题，我在我的谦虚的网络发展自由职业生涯中遇到过。我正在为一个工作申请网站构建一个Web应用程序，申请人使用他们的网络摄像头回答3个简短的问题。为此，我使用了一个名为 ScriptCam 的jQuery插件，它使用Flash激活用户的网络摄像头。我使用jQuery .show（）

<和 .hide（）以显示和隐藏按钮。当调用 $（＃replay）。show（）; 时，一个按钮是重放按钮，但是当我右键单击浏览器调用这个命令后，点击检查元素！我一直在寻找什么可能导致这个问题，但没有发现什么...可能导致这种行为？

这是我已经定义的按钮：

< div onclick ='replay（）;'id ='replay'class =replay> Replay< / div& / code>

这是按钮的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移动到body标签的正下方时，它会正常工作。所以这可能是父div的css冲突。

编辑：你可以看到问题在这里，只需点击按钮Volgende vraag，等待小视频完成。之后，重播按钮应显示在视频正上方。

解决方案

我找到了解决方案！该问题是由早期的容器div导致的，该容器具有CSS display：none 。虽然我在问题发生之前用jQuery的 .show（）更改它，并且它的内容可见，除去 display：none 在我的CSS让它工作！感谢您的大力协助和建议！

I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.

I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?

This is how I have defined the button:

<div onclick='replay();' id='replay' class="replay">Replay</div>

This is the button's 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;
}

Edit: This is CSS of the button's parent div:

.box{
    margin-left: 100px;
    height: 337px;
    width: 300px;
    float: left;
    text-align: center;
}

I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!

Update: It appears that only Safari on Mac is having issues.

Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?

Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.

解决方案

I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!

这篇关于元素只在检查元素之后出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！