Vue导航栏搜索框位置异常：Chrome与Firefox表现不一致

问题说明 #

点击搜索框后，Chrome浏览器中原本应显示在导航栏内的空白区域出现位置错误；Firefox浏览器中搜索框显示正常，但网站整体布局不符合预期。

问题根源 #

1. Chrome中搜索框激活后错位：Materialize的.input-field组件在flex容器内的绝对定位逻辑，与Chrome的渲染规则冲突，导致激活后的扩展区域偏移。
2. Firefox中布局异常：.nav-wrapper内直接嵌套的.row自带margin，与导航栏的默认高度不匹配，引发整体布局错位。

修复方案及代码调整 #

核心修改点 #

• 移除.nav-wrapper中冗余的width:100%（Materialize默认已设置全屏宽度）
• 给搜索框的.input-field添加position: relative，修正Chrome中的定位偏移
• 调整布局结构，避免.row的margin影响导航栏高度，改用Materialize推荐的导航栏内元素排布方式

修复后的完整代码 #

<!-- Navbar.vue -->
<template>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper">
      <!-- 用container替代row，避免默认margin影响布局 -->
      <div class="container">
        <div class="valign-wrapper" style="height: 64px;">
          <!-- Logo on the left -->
          <div class="col m2">
            <a href="#" class="brand-logo">TabletopHaven</a>
          </div>
          
          <!-- Search bar in the center -->
          <div class="col m7">
            <form>
              <div class="input-field center-align" style="position: relative;">
                <input id="search" type="search" required>
                <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                <i class="material-icons">close</i>
              </div>
            </form>
          </div>

          <!-- Login button on the right -->
          <div class="col m3 right-align">
            <a class="waves-effect waves-light btn">Register/Login</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'MainNavbar',
}
</script>

<style scoped>
.nav-wrapper {
  padding-left: 10px;
  padding-right: 10px;
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>

额外说明 #

• 使用container替代直接嵌套row，可以更好地适配Materialize的网格系统，避免浏览器间的margin渲染差异
• valign-wrapper配合固定高度，确保导航栏内元素垂直居中，统一跨浏览器的布局表现
• 为.input-field设置相对定位，让Chrome正确计算搜索框激活后的扩展区域位置

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