Question

我的问题是，当您在移动屏幕上或chrome开发人员移动工具中查看我的网站时，页面顶部的两个 div 会创建非常细的白色边框。在常规的浏览器视图中看不到这一点。

我以前在使用Lorem Ipsum标题和描述的div上遇到该问题，但是那是我将主体设置为具有背景色的时候。我四处张望，看到人们说过在身体上添加背景色会导致此问题。当我从身上移除背景色时，这些div中的白色轮廓消失了，现在开始在我的导航中显示。

我尝试将边距，填充和边框设置为0，并且将 outline：none 设置为0，但没有一个解决了我的问题。

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  outline: none;
  border: 0px;
}

.left_logo_nav {
  display: flex;
  width: 50%;
  align-items: center;
  height: 86px;
  background-color: #0D6AE8;
}

.main-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #0D6AE8;
  height: 86px;
  width: 50%;
}

.box {
  display: flex;
  flex-wrap: wrap;
}

.gap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 975px;
  background-color: #0D6AE8;
}

<body>
  <div class="box">
    <div class="left_logo_nav">
      <a href="index.html"><img class="top_logo" src="svg/franco_logo.svg" alt="Logo" /></a>
    </div>

    <nav class="main-nav">
      <li class="no-bullet"><a class="nav-text" href="#about">About</a></li>
      <li class="no-bullet"><a class="nav-text" href="portfolio.html">Portfolio</a></li>
      <li class="no-bullet"><a class="nav-text" href="#">Climate</a></li>
      <li class="no-bullet"><a class="nav-text" href="contact.html">Contact</a></li>
    </nav>

  </div>
  <div class="gap"></div>
</body>

Answer 1

将Box div设置为外部div并为此类提供背景颜色会删除白线

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  outline: none;
  border: 0px;
}

.left_logo_nav {
  display: flex;
  width: 50%;
  align-items: center;
  height: 86px;
  
}

.main-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
  height: 86px;
  width: 50%;
}

.box {
  display: flex;
  flex-wrap: wrap;
  background-color: #0D6AE8;
}

.gap {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 975px;
  
}

<body>
  <div class="box">
    <div class="left_logo_nav">
      <a href="index.html"><img class="top_logo" src="svg/franco_logo.svg" alt="Logo" /></a>
    </div>

    <nav class="main-nav">
      <li class="no-bullet"><a class="nav-text" href="#about">About</a></li>
      <li class="no-bullet"><a class="nav-text" href="portfolio.html">Portfolio</a></li>
      <li class="no-bullet"><a class="nav-text" href="#">Climate</a></li>
      <li class="no-bullet"><a class="nav-text" href="contact.html">Contact</a></li>
    </nav>
  <div class="gap"></div>
</div>
</body>

Answer 2

对于在移动视图中导致div细线造成的原因，我没有找到确切的答案，但是将大小更改为不同的单位确实会有所不同。

我做了一个简单的变通方法，而不是为每个div着色，而是为3个div制作了一个容器，并在其中添加了背景色。

       <div class="section_1">

         <div class="box">

           <div class="left_logo_nav"><a href="index.html"><img class="top_logo" 
           src="svg/franco_logo.svg" alt="Logo"/></a></div>

            <nav class="main-nav">
              <li class="no-bullet"><a class="nav-text" href="#about">About</a></li>
              <li class="no-bullet"><a class="nav-text" 
              href="portfolio.html">Portfolio</a></li>
              <li class="no-bullet"><a class="nav-text" href="#">Climate</a></li>
              <li class="no-bullet"><a class="nav-text" 
              href="contact.html">Contact</a> 
              </li>
            </nav>

          </div>

          <div class="gap"></div>

        </div>

对于CSS，我删除了背景色并将其添加到.section_1

            .section_1 {
                background_color: #0D6AE8;
            }

在手机屏幕上，我的div显示了不必要的白色边框

2 个答案: