跨浏览器（Chrome/Safari）搜索栏清除按钮定位不一致求助

开发带有清除按钮的搜索栏，通过JavaScript实现“搜索框有文本时按钮显示”的功能。使用absolute定位将清除按钮定位到搜索输入框右侧，但调整top值时，按钮在Chrome和Safari中的位置不一致，求解决方法。

以下是相关代码：

HTML #

<div class="rightnav">
<div class="search-bar">
  <form>
    <input class="search bt-outline" type="text" placeholder="Search">
  </form>
  <button class="bt-outline" id="clear-button">Clear</button>
  <div class="suggestion-box">
    <p> Popular Search</p>
    <p>Shoes</p>
    <p>shirts</p>
    <p>Jackets</p>
  </div>
</div>
</div>

CSS #

.rightnav {
  position: absolute;
  right: 2.9%;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.search-bar {
  position: relative;
  display: flex;
  margin-right: 1.59rem;
}

.search {
  font-size: 0.9rem;
  color: #111111;
  background-color: #f2f2f2;
  width: 150px;
  padding: 10px;
  border-radius: 50px;
  transition: 0.1s ease-in;
}

.expanded {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: white;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.search-bar.expanded form {
  width: 100%;
  max-width: 800px;
}

.expanded .search {
  margin-bottom: 1rem;
  width: 100%;
  color: black;
  padding: 20px;
  font-size: 24px;
  border-radius: 5px;
}

.expanded .search:focus {
  border: none;
  outline: none;
}

.expanded .search-button {
  display: none;
}

.suggestion-box {
  display: none;
}

/* 清除按钮定位 */
#clear-button {
  font-size: 0.9rem;
  display: none;
  cursor: pointer;
  background: rgb(255, 255, 255);
  font-weight: 500;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  position: absolute;
  top: 20.5px;
  padding: 25.15px;
}

.search-bar.expanded #clear-button {
  right: 20rem;
}

.search-bar.expanded {
  display: flex;
  flex-direction: column;
}

.search-bar.expanded .suggestion-box {
  display: block;
  width: 100%;
  padding: 10px;
  max-width: 800px;
  box-shadow: 0px 0px 8px 1px #c8c8c8;
  cursor: pointer;
}

JavaScript #

const searchContainer = document.querySelector('.search-bar');
const searchInput = document.querySelector('.search');
const clearButton = document.getElementById("clear-button");
const htmlElement = document.body;

searchInput.addEventListener('click', function() {
  searchContainer.classList.add('expanded');
  htmlElement.classList.add('overflow-hidden');
  htmlElement.classList.add("dimmed");
  toggleClearButton();
});

document.addEventListener('click', function(event) {
  if (!searchContainer.contains(event.target)) {
    searchContainer.classList.remove('expanded');
    htmlElement.classList.remove('overflow-hidden');
    htmlElement.classList.remove('dimmed');
    toggleClearButton();
  }
});

function toggleClearButton() {
  if (searchInput.value.trim() !== '' && searchContainer.classList.contains('expanded')) {
    clearButton.style.cssText = 'display: block';
  } else {
    clearButton.style.display = 'none';
  }
}

searchInput.addEventListener('input', toggleClearButton);

clearButton.addEventListener('click', function(e) {
  e.preventDefault();
  searchInput.value = '';
  searchInput.focus();
  toggleClearButton();
});

跨浏览器定位不一致的核心原因是固定像素值的top依赖浏览器默认盒模型和元素渲染规则，而不同浏览器的这些规则存在细微差异。以下是两种可靠的解决方式：

方式一：用transform实现绝对定位垂直居中（最小改动） #

修改清除按钮的CSS，替换固定top值为基于自身高度的居中方案，不受浏览器默认样式影响：

#clear-button {
  /* 保留其他原有样式 */
  position: absolute;
  top: 50%; /* 定位到父容器垂直中点 */
  transform: translateY(-50%); /* 向上偏移自身高度的一半，实现精准居中 */
  /* 移除原来的 top: 20.5px */
}

/* 展开状态下保持居中逻辑，仅调整right值 */
.search-bar.expanded #clear-button {
  right: 20rem;
  top: 50%;
  transform: translateY(-50%);
}

方式二：用Flex布局替代绝对定位（更推荐） #

将搜索框和清除按钮放入同一个Flex容器，让浏览器自动处理对齐，彻底消除定位差异：

1. 调整HTML结构：把清除按钮移到form内部，和搜索框同属一个容器

<div class="rightnav">
<div class="search-bar">
  <form class="search-form">
    <input class="search bt-outline" type="text" placeholder="Search">
    <button class="bt-outline" id="clear-button">Clear</button>
  </form>
  <div class="suggestion-box">
    <p> Popular Search</p>
    <p>Shoes</p>
    <p>shirts</p>
    <p>Jackets</p>
  </div>
</div>
</div>

2. 修改CSS：移除绝对定位，用Flex实现对齐

/* 新增搜索表单的Flex布局 */
.search-form {
  position: relative;
  display: flex;
  align-items: center;
}

#clear-button {
  /* 移除position:absolute、top、right等定位样式 */
  font-size: 0.9rem;
  display: none;
  cursor: pointer;
  background: rgb(255, 255, 255);
  font-weight: 500;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 10px; /* 匹配搜索框默认padding */
}

/* 展开状态下的样式调整 */
.search-bar.expanded .search-form {
  width: 100%;
  max-width: 800px;
}

.expanded .search {
  margin-bottom: 1rem;
  width: 100%;
  color: black;
  padding: 20px;
  font-size: 24px;
  border-radius: 5px;
}

.search-bar.expanded #clear-button {
  padding: 20px; /* 匹配展开后搜索框的padding */
}

额外优化：统一盒模型 #

在CSS全局添加以下代码，确保所有元素的padding和border不会影响宽高计算，进一步减少渲染差异：

* {
  box-sizing: border-box;
}

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