Question

我正试图摆脱出现在我网站的第2个Div之间的一条细白线（＆＃34; video_main＆＃34;＆＃34; parallax＆＃34;）。我认为这可能是视频的一个神器，所以我在Premiere Pro CC的导出中裁剪了底部，但它仍然出现。我尝试为video_main和parallax div设置边距，填充和边框0px，但它没有摆脱细白线。谁能说出它为什么会发生？非常感谢。

<!DOCTYPE HTML>
<html>

<head>
  <script src="//content.jwplatform.com/libraries/YQ8opLwo.js">
  </script>
  <script src="https://use.typekit.net/qkv6kzb.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <script src="https://use.typekit.net/qkv6kzb.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <meta charset="UTF-8">
  <title>Barton's website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="video_main">
    <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
    <source src="red_hook_rush_hour_trimmed.mp4" type="video/mp4">
        </video>
    <div class="content">
      <h1>Barton Lewis</h1>
      <h2>films about light and the urban landscape</h2>
      <div class="videolinks">
        <p><a href="index.html" title="home">home</a></p>
        <p><a href="bartons_film_site_works.html" title="works">works</a></p>
        <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p>
        <p><a href="bartons_film_site_cv.html" title="c/v">CV</a></p>
        <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p>
      </div>
    </div>
  </div>
  <div class="parallax">
    <div class="container_blank_space">
      <p>text</p>
    </div>
    <section class="wrapper_pano_and_text">
      <div class="pano">
        <img src="https://bartonlewisfilm.com/barton-3.jpg" alt="barton" width="auto" height="auto" />
      </div>
      <div class="pano_text">
        <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
      </div>
    </section>
  </div>
</body>

</html>

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
paragraph {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*THIS IS THE END OF THE MYER RESET*/

body {
  width: 100%;
  margin: 0 auto 0;
}

a {
  font-family: "europa", sans-serif;
  text-align: left;
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
}

a:hover {
  text-decoration: underline;
}

.parallax {
  /* The image used */
  background-image: url("https://bartonlewisfilm.com/html_bckgd_1024.jpg");
  /* Set a specific height */
  height: 1620px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.video_main {
  margin: 0 auto 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.video_main video {
  /*width: 100%;*/
  width: 100%;
  height: auto;
  min-width: 720px;
  margin: 0 auto;
  z-index: -1500;
}

.content h1 {
  font-family: "jaf-domus-titling-web", sans-serif;
  color: white;
  text-align: center;
  font-size: 400%;
  letter-spacing: 4px;
  z-index: 100;
  position: absolute;
  top: 50px;
}

.content h2 {
  font-family: "europa", sans-serif;
  color: white;
  text-align: center;
  font-size: 225%;
  letter-spacing: 6px;
  z-index: 100;
  position: absolute;
  top: 175px;
}

.content p {
  font-family: "europa", sans-serif;
  color: white;
  font-size: 120%;
}

h1 {
  width: 100%;
}

h2 {
  width: 100%;
}

.content .videolinks {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}

.videolinks p {
  padding: 20px;
  padding-left: 60px;
}

.videolinks p:first-child {
  padding-top: 250px;
}

.wrapper_pano_and_text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 0px;
  justify-content: center;
  align-items: center;
}

.pano img {
  width: 100%;
  height: 100%;
  padding: ;
  z-index: -1500;
}

.pano_text {
  width: 45%;
  overflow: hidden;
  z-index: 100;
  position: absolute;
}

.pano_text p {
  font-family: "europa", sans-serif;
  font-size: 150%;
  padding-right: 80px;
  letter-spacing: px;
  color: white;
  font-weight: 500;
  line-height: 135%;
  font-weight: 500;
}

.container_blank_space {
  height: 75px;
}

.container_blank_space p {
  text-indent: -9999px;
}

Answer 1

看起来.video_main下的视频元素缺少与display不同的inline值。

您应该将display（CSS）的值设置为display: block或display: flex，以便父容器可以正确调整其高度。

Working Codepen example。看一下.video_main video的声明。

白色线条出现在2个div之间

1 个答案: