顶部白线和css重置不起作用

Question

这里我在我正在构建的页面上遇到了“顶部白线”的典型问题，在这种情况下，经典的 css reset 无效。

桌子的黑色边框和浏览器的黑线之间有一条很小的白线。

这是页面的骨架：

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  font-family: "Lato", sans-serif;
}

#menu {
  width: 12%;
  height: 100%;
  float: left;
  position: relative;
  background-color: #ff0000;
}

#list {
  top: 140px;
  width: 100%;
  position: absolute;
}

#list a:hover {
  color: #a6a6a6;
}

ul {
  list-style: none;
  background-color: #ff0000;
}

li {
  width: 95%;
  padding: 12px 0px 12px 15px;
}

li a {
  font-size: 25px;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  transition: 1.0s;
}

#header {
  z-index: 1;
  height: 10%;
  width: 100%;
  position: relative;
  background-color: #0066ff;
}

table {
  width: 100%;
  height: 100%;
  position: absolute;
}

table,
td {
  border: 1px solid black;
}

td {
  color: #ffffff;
  text-align: center;
}

#title {
  font-size: 30px;
  width: 90%;
}

#logout {
  font-size: 20px;
  width: 10%;
}

img {
  float: right;
  width: 50%;
  height: 90%;
  margin: auto;
  opacity: 0.2;
}

<div id="menu">
  <div id="list">
    <ul>
      <li> </li>
      <li> <a href="#">Customers</a> </li>
      <li> <a href="#">Students</a> </li>
      <li> <a href="#">Teachers</a> </li>
      <li> <a href="#">Android</a> </li>
    </ul>
  </div>
</div>

<div id="header">
  <table>
    <tr>
      <td id="title">
        <p> Android Panel </p>
      </td>
      <td id="logout">
        <p> Logout </p>
      </td>
    </tr>
  </table>
</div>

<img src="https://image.freepik.com/free-vector/android-boot-logo_634639.jpg " />

正如您所看到的，我正在对页面中的每个元素应用 css reset ，就像StackOveflow suggests上的一些问题一样。

我想了解一下，我在这个css中有哪些配置，它对 css reset 的配置提出了任何阻力，或者可能是这里缺少哪种配置。

P.S：我正在使用 Google Chorme 。

Answer 1

我建议做的一件事是查看页面的计算框模型及其中的特定元素。这可以帮助您找到导致我听起来像1px边距的内容。由于您使用的是chrome，因此开发工具快捷方式是ctrl + shift + I.

我在Firefox和Chrome中查看了您的页面，但似乎没有白线。它可能是您正在使用的浏览器版本，但情况可能并非如此。

在查看截图时，我注意到您可能正在谈论的白线。这只是chromes浏览器界面的一部分。如果您想在没有界面的情况下查看您的网站，只需在浏览器中按键盘上的f11即可。这将使您进入全屏模式。

浏览器的自定义主题也可能导致其显示方式不同，看起来就像是您网页的一部分。