即垂直对齐：超/子不正确

Question

我想申请超/子垂直对齐css属性的span元素。做完这些之后，范围内的单词将呈现在正确的位置上。但是，包含这些单词的跨度看起来像放在IE下的不正确位置（基线位置）。它在除IE以外的其他浏览器下工作正常。

更有趣的是，我发现如果我将一个属性contenteditable =“true”赋值给span元素，它的位置就变得正确了（...）。

你们可以在这里查看（与属性CONTENTEDITABLE =“真正的”顶部位置为0，内部消除属性CONTENTEDITABLE =“真正的”最高排名7）： http://jsfiddle.net/E5Af9/

你可以尝试删除CONTENTEDITABLE =”真正的“在第一个蓝色的跨度，看看会发生什么。它的行为就像我上面所说的。

我想要更安全的选项，其他在span元素上添加一个不确定的属性。 有没有人有想法呢？或者是否有人可以告诉我，我是否会在跨度使用contenteditable时产生副作用。

Answer 1

即使在IE 7模式下，我也无法在IE 9上看到问题。我不确定什么被视为一个问题，因为描述似乎表明跨度内的单词被正确渲染，但跨度不是 - 我不明白这意味着什么。

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

vertical-align: 1ex; 

你可以设置

position: relative; bottom: 1ex; 

他们关键字值super和sub具有实现有关的含义，他们往往除了跨浏览器不同的排版不合适的。垂直放置通常应该取决于周围的字符和字体，所以最好自己设计一下，通常使用em单元或ex单元，而不是告诉浏览器应用上标或下标的思想。