`span`标签破坏了文本的垂直对齐方式？答案

【问题标题】：`span` tag ruins vertical alignment of text?`span`标签破坏了文本的垂直对齐方式？
【发布时间】：2020-04-23 05:49:00
【问题描述】：

当我在我的代码中使用span 标签时（根据什么文本改变文本的背景）文本不是垂直对齐而不是它当我在 Android Chrome 浏览器中打开我的代码时的背景。让它成为Code v.1（JSFiddle），结果如下：

但是，当我删除 span 标记时，垂直对齐看起来非常好。让它成为Code v.2（JSFiddle），结果如下：

不要被JSFiddle预览窗口误导：首先，一定要放大它（在small窗口大小上看不到对齐不比例），其次-代码v JSFiddle 中的 .1 将文本移动到其背景的底部，而在 Android Chrome 上，相同的代码将其移动到顶部（参见上面的屏幕截图）。

我不在寻找什么：

JavaScript 解决方案 - 不适合我的情况
padding 标记的手动微调 - 问题显然在 span 标记中，而不是在填充中

这是代码 v.1：

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  border-radius: 0.3em;
  padding: 0.1em 0.2em 0.1em;
  font-size: calc(0.4em + 1.5vw);
}

.noun {
  background-color: #2196f3;
}

.adjective {
  background-color: #ff9800;
}

.verb {
  background-color: #4caf50;
}

.adverb {
  background-color: #f94432;
}

.conjunction {
  background-color: #a047f9;
}

<div class="part_of_speech">
  <span class="part_of_speech noun">NOUN</span>
  <span class="part_of_speech adjective">ADJ.</span>
  <span class="part_of_speech verb">VERB</span>
  <span class="part_of_speech adverb">ADV.</span>
  <span class="part_of_speech conjunction">CONJ.</span>
</div>

这是代码 v.2：

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  border-radius: 0.3em;
  padding: 0.1em 0.2em 0.1em;
  font-size: calc(0.4em + 1.5vw);
  display: inline-block;
  /* NEW */
  background-color: #2196f3;
  /* MIGRATED FROM .partofspeech CLASSES BELOW */
}


/* .partofspeech CLASSES WERE DELETED DUE TO DELETION OF <SPAN> TAG */

&lt;div class="part_of_speech"&gt;NOUN &lt;/div&gt;

【问题讨论】：

会不会是原生<span>风格的line-height或vertical-align有问题？很难在不查看 Android 手机的情况下进行调试，因为它在我的桌面 Chrome 中运行良好。 PS：也许可以使用集成的 StackOverflow sn-ps 工具制作 sn-ps，以便更容易获得它们？
您可以制作内部跨度display: inline-flex;，我认为它可能会解决问题
我已为您的问题添加了 v1 和 v2 的内联可运行代码示例，在我看来两者完全相同。
Sheraff, Alon Eitan - 请您修改我的代码 v.1（JSFiddle 允许保存更新的代码）以显示您的确切意思，因为我是不确定我是否理解正确。谢谢！
@Tomalak - 这是问题的核心。 Android 中的结果看起来正好相反，我用屏幕截图演示了这一点。

标签： html css text-alignment text-align

【解决方案1】：

事实上，解决方案非常简单：每个span 中都存在div 之间的冲突。从spans 中删除div-component 并在general div 中添加一个跨度选择器使代码能够按预期工作：

.part_of_speech {
  font-family: Verdana, Geneva, sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: calc(0.4em + 1.5vw);
}

.part_of_speech > span {
  padding: 0.1em 0.2em 0.1em;
  border-radius: 0.3em;
}

.noun {
  background-color: #2196f3;
}

.adjective {
  background-color: #ff9800;
}

.verb {
  background-color: #4caf50;
}

.adverb {
  background-color: #f94432;
}

.conjunction {
  background-color: #a047f9;
}

<div class="part_of_speech">
  <span class="noun">NOUN</span>
  <span class="adjective">ADJ.</span>
  <span class="verb">VERB</span>
  <span class="adverb">ADV.</span>
  <span class="conjunction">CONJ.</span>
</div>

【讨论】：