javascript 元素仅在检查元素后出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18243427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Elements apear only after inspect element
提问by MickvJ
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 ScriptCamwhich uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
我刚刚遇到了在我卑微的网络开发自由职业生涯中遇到的最奇怪的问题。我正在为求职网站构建一个网络应用程序，申请人使用他们的网络摄像头回答 3 个简短的问题。为此，我使用了一个名为ScriptCam的 jQuery 插件，它使用 Flash 来激活用户的网络摄像头。我让这一切工作得很好，但现在我遇到了以下问题。
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?
我使用 jQuery .show()and.hide()来显示和隐藏按钮。一个按钮，即重播按钮，在调用时不显示，$("#replay").show();但在调用此命令后右键单击浏览器中的任意位置并点击“检查元素”时会显示！我一直在寻找可能导致这个问题的原因，但没有找到任何东西......什么可能导致这种行为？
This is how I have defined the button:
这就是我定义按钮的方式：
<div onclick='replay();' id='replay' class="replay">Replay</div>
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
这是按钮的 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:
编辑：这是按钮的父 div 的 CSS：
.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.
更新：似乎只有 Mac 上的 Safari 有问题。
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?
更新 2：当将按钮从它的父 div 移到 body 标签正下方时，它可以正常工作！所以这可能是父div的css冲突？
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.
编辑：您可以在此处实时查看问题，只需点击“Volgende vraag”按钮等待小视频完成即可。之后，重播按钮应出现在视频正上方。
回答by MickvJ
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:nonein my CSS makes it work! Thanks for all the great help and suggestions!
我找到了解决办法！该问题是由具有 CSS 的较早容器 div 引起的display:none。虽然我.show()在问题发生之前用 jQuery 改变了它并且它的内容是可见的，但display:none在我的 CSS 中删除使它起作用！感谢所有的大力帮助和建议！
回答by Derrik de Moei
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element. Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.
对我来说，我必须更改我发现隐藏在样式表中图像上方的元素的可见性以解决问题。我通过使用检查元素找到了它。然后在更改它之后，图像明显向上移动，所以我不得不更改边距以将其更改回原始位置。
