Question

.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.7);
  z-index: 1000;
}

.modal-body {
  width: 80%;
  height: auto;
  max-height: 100vh;
  opacity: 1;
  background-color: #4C4C4C;
}

video {
  display: block;
  width: 100%;
  max-height: 100vh;
  outline: none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>OTHER CONTENT</div>
    <div class="video-modal">
      <div class="modal-body">
        <video src="" controls></video>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

我的页面上有一些要显示的元素：单击时没有显示。在Chrome上，所有功能均按预期工作，但在Safari上，页面加载后，元素迅速在屏幕上闪烁。我猜想html是在css文件进程和规则设置之前加载的。但是为什么会这样，为什么只在Safari中呢？另外，为什么这些元素在页面上的任何其他html元素之前加载并显示在屏幕上？例如，请参见图像（该图像是我已使用display：none隐藏并在点击时显示的视频模式）。

编辑：这是Repl显示的问题，注意：必须在Safari中。 https://repl.it/@teeej/ReliablePunctualRam

带显示内容：css载入Safari之前无显示

0 个答案: