如何修复页面中意外出现的白色横线问题-html教程-PHP中文网

如何修复页面中意外出现的白色横线问题

页面中出现一条与按钮高度一致的白色横线，通常是因为默认白色背景暴露所致；只需将背景样式从html元素移至body元素即可彻底消除该异常线条。

页面中出现一条与按钮高度一致的白色横线，通常是因为`

`默认白色背景暴露所致；只需将背景样式从`html`元素移至`body`元素即可彻底消除该异常线条。

这个问题看似神秘，实则源于 CSS 渲染机制中的一个常见细节：元素本身并不自动撑满视口高度，而默认具有 margin: 8px 且背景透明，其父级（即 html）若设置了背景，但未显式设置 height: 100% 或 min-height: 100vh，就可能导致背景未能完全覆盖整个可视区域——尤其当内容高度不足时，body 的默认边距与透明背景会“漏出”底层浏览器默认的白色背景，形成一条贯穿屏幕的白色横线。

在你的 SCSS 代码中：

html {
  background: linear-gradient(to left, peachpuff, coral);
}

这段样式并未让背景真正铺满整个视口，因为 html 元素的高度默认由内容决定，而非视口。此时，body 仍保留其默认 background: transparent 和 margin: 8px，导致顶部/底部或中部（取决于布局流）暴露出白色缝隙——而你按钮的高度（75px）恰好与这条“缝隙”的视觉位置重合，强化了错觉。

✅ 正确做法是：将渐变背景应用到 body，并清除其默认边距：

小艺

小艺是华为推出的系统级 AI 智慧助手和在线对话服务。

下载

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

body {
  margin: 0;
  background: linear-gradient(to left, peachpuff, coral);
  min-height: 100vh; // 确保至少占满整个视口高度
  font-family: "Raleway", sans-serif;
}

同时，修正其他潜在问题以提升健壮性：

.center 中 margin: center 是无效语法，应改为 margin: 0 auto（配合 width）或使用 text-align: center（仅居中文本/行内元素）；
border: 10px 缺少单位（应为 10px），且建议合并书写：border: 10px solid $color1;，再单独覆盖 border-bottom-style: dotted;
:hover 和 :active 伪类缺少选择器前缀（如 .button:hover），否则会全局生效，影响所有元素。

优化后的完整 SCSS 示例：

$color1: #010226;
$color2: #fcdbab;

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

body {
  margin: 0;
  background: linear-gradient(to left, peachpuff, coral);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  width: 100px;
  height: 75px;
  border: 10px solid $color1;
  border-bottom-style: dotted;
  border-radius: 20px;
  padding: 0 10px;
  background-color: $color1;
  color: $color2;
  font-family: "Raleway", sans-serif;
  font-size: 20px;
  font-weight: bolder; // 'bolder' 是有效值，但推荐用数值如 700 或关键字 bold
  text-align: center;
  line-height: 75px; // 垂直居中文本（因无行高，文本可能偏上）
  cursor: pointer;

  &:hover {
    border-color: lighten($color1, 10%);
  }

  &:active {
    border-color: lighten($color1, 15%);
  }
}

? 关键总结：