为何Firefox/Chrome等浏览器仍显示白边？是否与figure元素有关？

嘿，作为前端新手遇到这种浏览器默认样式的坑太正常了！先给你明确说：这个白边确实和figure元素有关，但更核心的是浏览器自带的「默认样式表（User Agent Stylesheet）」在搞鬼，咱们一步步拆解：

为什么会出现白边？ #

大部分浏览器（Chrome、Firefox都在内）会给很多元素设置默认的margin/padding：

• 比如<body>标签，默认会有margin: 8px（不同浏览器数值可能略有差异，你看到的15px左/10px顶大概是浏览器计算后的结果）；
• 而<figure>标签本身，默认也带有margin: 1em 40px（左右的margin尤其明显）。

你给figure加了position: absolute; width:100%; height:100%，理论上它应该覆盖父元素，但如果父元素.crossbgimage或者<body>的默认margin没清除，就会在页面边缘露出空隙，也就是你看到的白边。

具体修复步骤 #

1. 先重置全局默认样式 #

最简单直接的方式是给所有元素清零默认margin和padding，同时设置盒模型避免尺寸计算混乱：

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

这行代码能一次性干掉所有浏览器给元素加的默认边距，从根源解决问题。

2. 确保父元素.crossbgimage的定位和尺寸正确 #

因为你的figure是绝对定位，它的参照对象是最近的「定位父元素」（设置了position: relative/absolute/fixed的元素），如果父元素没设置定位，figure会相对于整个视口定位，但父元素本身的边距还是会导致白边。所以给.crossbgimage加这些样式：

.crossbgimage {
  position: relative; /* 让内部的figure以它为定位参照 */
  width: 100vw; /* 强制占满整个视口宽度 */
  height: 100vh; /* 强制占满整个视口高度 */
  overflow: hidden; /* 防止图片溢出父元素 */
}

3. 优化figure的样式（可选但保险） #

你现有的figure样式没问题，但可以明确加上top:0; left:0（虽然绝对定位默认是左上角，但显性设置能避免意外情况）：

.crossbgimage > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  border: 0;
  color: transparent;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
  top: 0; /* 确保贴紧顶部 */
  left: 0; /* 确保贴紧左侧 */
}

总结 #

这个问题本质是浏览器默认样式的干扰，figure的默认margin是诱因之一，但核心是没重置全局样式+父元素定位/尺寸没设置到位。按照上面的步骤改完，白边应该就消失啦！

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