HTML搜索栏移动端放大镜按钮与输入框高度不一致适配问询

问题根因 #

你遇到的跨端高度不一致问题核心来自两点：一是按钮使用绝对定位脱离了文档流，高度百分比参考的父容器高度完全由输入框的默认样式撑开，移动端浏览器的表单元素默认padding、行高和桌面端存在原生差异；二是没有统一盒模型规则，边框、内边距会额外撑开元素高度，导致两者高度计算逻辑不一致。

修改后的完整代码 #

CSS 代码

/* 统一盒模型，避免宽高计算偏差 */
* {
  box-sizing: border-box;
}

.autocomplete {
  position: absolute;
  top: 50%;
  left: 15%;
  width: 40%;
  font-family: 'Fjalla One';
  /* 新增Flex布局规则实现自动对齐 */
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* 统一输入框跨端默认样式 */
#searchField {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc; /* 可根据设计稿调整边框样式 */
  font-size: 16px;
  outline: none;
  margin: 0;
}

button[type=reset] {
  background-color: #34587F;
  color: #fff;
  border: 0;
  font-size: 16px;
  border-radius: 10%;
  width: 20%;
  cursor: pointer;
  /* 内部图标居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 代码

<div class="autocomplete">
  <input id="searchField" type="text" name="search" placeholder="SEARCH" />
  <button type="reset" id="submit" onclick="goTo();"><i class="bi bi-search"></i></button>
</div>

核心调整说明 #

• 用Flex布局替代绝对定位做横向排版，align-items: stretch属性会强制所有子元素高度和父容器保持一致，不需要手动做高度匹配。
• 全局统一box-sizing: border-box后，元素的内边距、边框都会包含在你设置的宽高数值内，不会出现额外撑开高度的问题。
• 清除了输入框、按钮的默认外边距、内边距，消除不同浏览器、不同设备的原生样式差异。
• 按钮内部新增Flex居中规则，避免放大镜图标在不同尺寸下位置偏移。

内容的提问来源于stack exchange，提问作者Emma C.