我正在创建一个网站,当在CSS中添加背景图片时,屏幕左侧似乎出现了一条随机的白色垂直线。我已经在Chrome浏览器和Safari浏览器中都进行了检查。谁能解决这个问题并解释其起源?



    .container-fluid {
      background-color: white;
      background-image: none;
      border-color: white;
      border-style: solid;
      border-width: 15px 15px 15px 15px;
    }
    .navbar {
      display: flex;
      align-items: center;
    }
    .fb {
      height: 50px;
      width: 50px;
      float: right;
    }
    a.btn-quote {
      float: right;
      padding-top: auto;
      padding-bottom: auto;
    }
    .header {
      background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
      background-repeat: none;
      background-size: cover;
    }
    .logo_img {
      height: 150px;
      width: 200px;
      float: left;
      display: block;
    }
    blockquote.slogan {
      font-size: 35px;
      color: red;
      text-align: center;
    }
    .quote {
      text-align: center;
      font-size: 40px;
      color: white;
    }
    span.free {
    	color: red;
    }
    .premium {
      font-family: 'Graduate';
      font-size: 50px;
      text-align: center;
      color: white;
    }
    .addy {
      max-width: 50%;
      margin-right: auto;
      margin-left: auto;
    }
    .fqbutton {
      display: inline-block;
      margin-right: auto;
      margin-left: auto;
    }
    .article {
    	margin-right: 250px;
    	margin-left: 250px;
    }
    blockquote.construction {
      font-size: 15px;
      color: white;
      text-align: center;
    }
    .constructpic {
      height: 250px;
      width: 250px;
      display: block;
      margin-right: auto;
      margin-left: auto;
    }
    footer {
      text-align: center;
      color: black;
      background-color: white;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>CCF Lawn Care</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="style1.css"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>
    <!-- MAIN CONTAINER -->
      <div class="container-fluid">
        <body>
          <!--   CCF LOGO IMG -->
        <img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
    <!--     NAV BAR -->

    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">CCF Lawn Care</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href="#">Services</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <!-- FACEBOOK -->
        <a href="https://www.facebook.com/CFFLAWNCARE/" target="blank"><img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb"></a>
        <!-- FREE QUOTE BUTTON -->
        <a href="#" class="btn btn-danger btn-quote" role="button">Free Quote</a>

      </div>
    </nav>
    <blockquote class="slogan"><em>"We work hard so <strong>               <ins>YOU</ins></strong> don't have to!"</em>
          </blockquote>

          <!-- HEADER -->
          <div class="header">
          <p class="premium">Premium Lawn Care service in Middle Tennessee</p>
          <!--   FREE QUOTE SECTION -->
          <div class="addy">
          <input class="form-control" type="text" placeholder="Enter your address here" required>
          <button type="submit" class="btn btn-primary">Get Free Quote </button>
          </div>

        <h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
          <!--   ARTICLE SECTION -->



            <blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>

          <!--   FOOTER -->
          <footer>
            Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
          </footer>
          <!-- jQuery CDN -->
             <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
             <!-- Bootstrap Js CDN -->
             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>


    </html>

最佳答案

白线是由于blockquote元素引起的,您可以通过添加

    blockquote {
    border-left: none;
}

10-06 12:24