移动端阿尔巴尼亚语导航栏白色边框问题求助

问题描述 #

我正在搭建支持阿尔巴尼亚语等多语言的网站，导航栏包含Home、Contact、About和语言选择器。切换到阿尔巴尼亚语（对应Ballina、Kontakt、Rreth Nesh）时，移动端视图下导航项会出现白色边框；修改字体后，白色边框又出现在英语版本，桌面端无此问题。

排查方向 #

这种循环出现的边框问题，大概率是移动端浏览器默认焦点样式触发，或是语言切换后文本长度变化导致元素尺寸渲染异常，和字体渲染的兼容性也有关联。

具体解决步骤 #

1. 重置可交互元素的默认焦点样式 #

移动端浏览器会给获得焦点的元素添加默认高亮边框，语言切换时元素可能因文本重排重新获取焦点，触发该样式。直接覆盖默认样式：

/* 完全移除默认焦点边框，如需自定义可修改此处 */
li:focus,
a:focus,
select:focus,
option:focus {
  outline: none;
  box-shadow: none;
}

2. 统一导航元素的盒模型尺寸 #

不同语言文本长度差异会导致元素尺寸波动，触发渲染异常。给导航项设置固定最小宽度或统一内边距，保证尺寸稳定：

.nav-links li {
  min-width: 100px; /* 根据实际布局调整数值 */
  padding: 0 10px;
  box-sizing: border-box;
}

3. 优化字体渲染兼容性 #

修改字体后出现问题，可能是移动端字体渲染差异导致尺寸计算偏差，添加字体渲染优化属性：

li, a, button, select {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
  box-shadow: none;
  /* 优化字体渲染，避免尺寸偏差 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

4. 替换废弃的标签 #

<center>标签已被废弃，可能带来未知布局影响，改用CSS实现居中：
修改后的HTML：

<header class="header">
  <img class="logo" src="../images/selcon-logo.png" alt="logo">
  <nav>
    <ul class="nav-links">
      <li class="li-al"><a class="home-li" href="home-al.html">Ballina</a></li>
      <li class="li-al"><a class="contact-li" href="contact-al.html">Kontakt</a></li>
      <li class="li-al"><a class="about-li" href="about-al.html">Rreth Nesh</a></li>
      <li>
        <select id="language-selector">
          <option value="en">EN</option>
          <option value="mk">MK</option>
          <option value="al">AL</option>
        </select>
      </li>
    </ul>
  </nav>
</header>

对应的CSS：

.nav-links {
  text-align: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

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