如何确保CSS的top属性在所有浏览器中表现一致？

问题现象 #

使用top:395px固定定位按钮时，仅Microsoft Edge中位置匹配背景图预期（可见7条虚线），Firefox、Chrome、Safari等浏览器中按钮偏移，仅可见4条虚线。

问题根源 #

1. 固定定位的视口差异：position: fixed元素相对于浏览器视口定位，不同浏览器对视口的计算存在细微差异（如滚动条宽度、默认样式处理），硬编码像素值无法适配所有环境。
2. 定位逻辑冲突：父容器.parent的flex居中属性对fixed元素完全无效，因为fixed元素脱离了正常文档流，导致按钮仅依赖硬编码的top值定位，缺乏统一的参考基准。

解决方案 #

放弃硬编码像素定位，改用基于视口的自适应定位，同时统一按钮与脉冲背景的定位逻辑，确保跨浏览器一致性。

修改后的完整代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型计算规则 */
}

body {
  background-image: url("https://i.imgur.com/73kAdwa.jpeg");
  background-position: center center;
  background-size: cover; /* 保持背景图比例，避免拉伸变形 */
  overflow: hidden; /* 隐藏滚动条，消除视口宽度波动 */
}

.parent {
  width: 100vw;
  height: 100vh;
  position: relative; /* 作为子元素绝对定位的参考容器 */
}

button {
  all: unset;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  position: absolute; /* 改为绝对定位，相对于.parent */
  top: calc(50vh - 65px); /* 垂直居中，50%视口高度减去按钮半高 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中，不受滚动条影响 */
}

#button {
  width: 300px;
  height: 130px;
  background-color: #58cc02;
  box-shadow: 0 10px 0 #58a700;
}

#button:active {
  box-shadow: none;
  transform: translateX(-50%) translateY(10px); /* 点击时保留水平居中 */
}

.bg {
  position: absolute; /* 与按钮统一定位方式 */
  width: 300px;
  height: 130px;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
  top: calc(50vh - 65px);
  left: 50%;
  transform: translateX(-50%);
}

@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(1, 1); /* 动画时保留水平居中 */
  }
  100% {
    transform: translateX(-50%) scale(1.1, 1.2);
  }
}

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet">
  
  <title>Pulsing Button</title>
</head>
<body>

<div class="parent">

  <button id="button" >
    Click ME
  </button> 
  
  <div class="bg"></div>
 
  

</div>


<script src="script.js" ></script>
</body>
</html>

关键修改说明 #

• 统一盒模型：添加box-sizing: border-box确保所有元素的宽高计算规则一致，消除浏览器默认差异。
• 自适应定位：用calc(50vh - 65px)替代硬编码的top:395px，基于视口高度实现垂直位置的自适应，如需调整位置，可修改50vh为其他百分比（如40vh让按钮更靠上）。
• 可靠水平居中：left:50% + transform: translateX(-50%)的组合不受浏览器滚动条宽度影响，比传统居中方式更稳定。
• 统一定位基准：按钮与脉冲背景均改为相对于.parent的绝对定位，确保两者位置完全同步，避免偏移。

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