嵌套内联元素“vertical-align”在 Chrome 和 Firefox 上的行为不同

编程问答 2022-05-28

问题描述

我将一个span元素放在一个span内，并为外span设置vertical-align: 20px，为内span设置vertical-align: top。 HTML 和 CSS 代码在这里。 codepen

.mid {
  vertical-align: 20px;
  outline: 1px solid;
}

.right {
  vertical-align: top;
    outline: 1px solid;
}

.se {
  vertical-align: top;
}
<html>

<body>
  <p class="out">A<span class="mid">B<span class="right">C</span>D</span><span class="se">E</span></p>

</body>

</html>

在 Chrome 上显示

enter image description here

在 Firefox 上显示

enter image description here

标准行为是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

frontendinlinevertical-alignment