导航菜单右侧边框高度不一致问题求助（Emoji影响）

问题根源在于inline-block元素默认的基线对齐规则：表情字符的基线位置和普通文字不一样，带表情的li被撑到了更高的高度，边框自然是全高；其他li因为按基线对齐，高度没拉满，所以边框看起来短，跟margin:0没关系。

给你两个靠谱的修复方案：

方案1：强制顶部对齐（兼容旧浏览器） #

给nav li添加vertical-align: top，让所有菜单项统一按顶部对齐，高度自动拉平：

nav li {
  display: inline-block;
  margin: 0px;
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
  vertical-align: top; /* 新增这行 */
}

方案2：改用Flex布局（推荐，现代布局更稳定） #

把nav ul改成flex容器，彻底摆脱inline-block的对齐坑，flex项默认会自动拉伸高度，所有边框自然全高：

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex; /* 新增这行 */
}

nav li {
  /* 移除 display: inline-block; */
  margin: 0px;
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

两种方案都不用删表情，选哪个看你浏览器兼容需求，Flex方案更简洁省心。

内容的提问来源于stack exchange，提问作者Michał Leśko