页面顶部出现意外横线，寻求永久移除的技术解决方案

以下是针对你遇到的页面顶部意外横线问题的几种实用解决方法：

1. 重置浏览器默认样式 #

浏览器会给body、ul等元素设置默认的内外边距和列表样式，这很可能是横线出现的原因。在全局样式文件中添加以下代码，清除这些默认样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

2. 检查并清除导航栏相关的边框/伪元素 #

意外横线也可能来自导航栏的默认边框，或者伪元素的溢出。修改你的_header.scss代码：

.site-header {
  position: relative;
  padding: 24px 0;
  z-index: 2;
  border-top: none; // 强制移除顶部边框

  &::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -100px;
    width: 1440px;
    height: 324px;
    background-image: url('../images/header-illustration-light.svg');
    overflow: hidden; // 防止伪元素内容溢出产生线条
  }
}

3. 排查全局样式冲突 #

用浏览器开发者工具（按F12）选中顶部横线的区域，查看该元素的样式来源，找到导致横线的CSS规则后进行覆盖。比如如果是body被设置了顶部边框，就添加：

body {
  border-top: 0;
}

尽量避免使用!important，优先找到原样式规则进行修改。

内容的提问来源于stack exchange，提问作者EricPlayz YT