使用rem单位缩放页面时按钮与输入框间隙问题排查

云上老周

2026-7-16

按钮缩放错位问题：原因与底层逻辑

我在项目中用CSS position属性将按钮放置在输入框内，响应式模式下显示正常，但缩放页面时，按钮与输入框的顶部或底部会出现间隙，部分缩放比例下又恢复正常。全程使用rem单位，本以为rem会随viewport缩放不会出现这类问题，换成px单位后问题依旧，且不同浏览器的表现存在差异。附上相关代码及缩放截图，想了解该按钮错位问题是否与浏览器实现有关，底层逻辑是什么？

相关代码

CSS代码

/*Default Adjustments*/
:root {
  --color-secondary: #00acc1;
  --color-accent: #F86F03;
  --color-body: #212121;
  --color-text: #FBFFDC;
  --colorButton: #847f7d;
  --colorBorder: #A8A196;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*,
 ::placeholder {
  color: var(--color-text);
}

html {
  font-size: 10px;
}

body {
  font-family: "Inter", arial, helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  background: var(--color-body);
}

.btn {
  background: var(--colorButton);
  border: .1rem solid var(--colorBorder);
  border-radius: .3rem;
}

/*Basic divs*/
.adjust {
  display: flex;
  justify-content: center;
}

.whole {
  background: var(--color-secondary);
  padding: 1.5rem;
  border-radius: 0.6rem;
  margin-top: 2rem;
}

.add {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1.3rem;
}

.addButton {
  position: absolute;
  cursor: pointer;
  top: 0.27rem;
  right: 8rem;
  font-size: 1.3rem;
  border: 0;
  border-radius: 0 .3rem .3rem 0;
  background: var(--colorButton);
}

.add input {
  outline: none;
  text-indent: 0.5rem;
  font-size: 1.3rem;
  background: var(--colorBorder);
  border: .3rem solid var(--colorButton);
  border-radius: .5rem;
}

.add input::placeholder {
  font-size: 1.25rem;
}

HTML代码

<div class="adjust">
  <div class="whole">
    <form class="add">
      <input class="addBook" type="text" required maxlength="50" pattern="\S(.*\S)?" title="Your book name can't start or end with white space and should include at least 
            1 non-white space character" placeholder="e.g Harry Potter" name="" id="" />
      <button class=" btn addButton">Add</button>
    </form>
  </div>
</div>

截图说明

100%缩放比例：显示正常，无间隙
90%缩放比例：输入框顶部出现间隙
80%缩放比例：显示正常，无间隙

问题原因与底层逻辑

这个问题确实和浏览器的渲染实现直接相关，核心源于像素对齐与浮点精度计算：

浮点像素的舍入差异
页面缩放时，浏览器会将CSS单位（无论rem还是px）转换为实际设备像素。当缩放比例为非整数倍（比如90%）时，计算后会得到非整数的像素值（例如复杂的rem嵌套计算可能得到8.73px这类浮点值）。不同浏览器对这类浮点像素的舍入策略不同——有的向上取整，有的向下取整，有的采用亚像素渲染，这直接导致元素实际渲染位置出现偏移，表现为间隙。
绝对定位的依赖计算
按钮使用position: absolute配合固定的top: 0.27rem定位，缩放时该值会被转换为浮点像素；而输入框的高度、边框等属性同样会被转换为浮点值，两者的舍入处理不一致时，就会出现错位间隙。即使换成px，只要缩放比例不是100%的整数倍，同样会触发浮点像素计算问题。
浏览器渲染引擎的差异
Chrome（Blink）、Firefox（Gecko）、Safari（WebKit）等浏览器的渲染引擎，在亚像素渲染、像素对齐的逻辑上存在细节差异。比如部分浏览器会优先对齐像素网格以保证文本可读性，有的则保留亚像素精度，这也导致不同浏览器的错位表现不一致。
rem单位的本质
rem是基于根元素字体大小的相对单位，但最终仍会转换为px渲染。页面缩放时，根元素字体大小也会被缩放，最终计算出的rem对应像素值依然可能是浮点数，因此无法避免浮点精度问题。

优化思路

若要解决该问题，可替换固定偏移的绝对定位方案，改用更健壮的布局方式：

用flex布局将按钮与输入框整合在同一容器内，让按钮自然对齐输入框边缘；
给输入框设置padding-right预留按钮位置，按钮用position: absolute配合top: 50%; transform: translateY(-50%)实现垂直居中，避免依赖固定偏移值；
尽量让输入框和按钮的高度、边框等属性使用整数单位，减少浮点计算概率。

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

使用rem单位缩放页面时按钮与输入框间隙问题排查

相关代码 #

CSS代码 #

HTML代码 #

截图说明 #

问题原因与底层逻辑 #