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

Question

这里我有一个典型的问题，我正在构建的页面上有“顶部白线”，在这种情况下，经典的 css 重置 不起作用。

在表格的黑色边框和我浏览器的黑线之间有一条细小的白线。

---

这是页面的框架:

* {
  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 重置，作为 StackOveflow 上的一些问题 suggests .

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

P.S:我使用的是 Google Chorme。

Answer 1

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

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

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

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