css - 即垂直对齐 :super/sub incorrect

Question

我想为 span 元素应用 super /子垂直对齐 css 属性。这样做之后，跨度内的单词就会呈现在正确的位置。但是，包含这些词的 span 在 IE 下看起来像是放在了错误的位置(基线位置)。它在除 IE 之外的其他浏览器下工作正常。

更有趣的是，我发现如果我将一个属性 contenteditable="true"分配给 span 元素，它的位置就会变得正确(...)。

你们可以在这里查看(有属性 contenteditable="true"top position 是 0 没有属性 contenteditable="true"top position 是 7): http://jsfiddle.net/E5Af9/

您可以尝试删除第一个蓝色跨度上的 contenteditable="true"以查看会发生什么。它的行为就像我上面所说的。

除了在 span 元素上添加不确定属性之外，我想要更安全的选择。 有人对此有想法吗？或者谁能​​告诉我在 span 中使用 contenteditable 是否会有副作用。

Answer 1

即使在 IE 7 模式下，我也看不到 IE 9 上的问题。我不确定什么被认为是问题，因为描述似乎是说 span 内的单词呈现正确但 span 不是——我不明白这可能意味着什么。

无论如何，vertical-align 在浏览器中有一些怪癖，甚至根据规范，它可能会影响行高，这通常是不受欢迎的。因此，通常最好使用相对定位。例如，而不是

vertical-align: 1ex;

你可以设置

position: relative; bottom: 1ex;

它们的关键字值 super 和 sub 具有依赖于实现的含义，除了在不同浏览器之间有所不同之外，它们通常在排版上不合适。垂直放置一般要根据周围的字符和字体，所以最好自己设计，一般使用em 单位或ex 单位，而不是仅仅告诉浏览器应用上标或下标的想法。