< sup>的渲染错误在Chrome和Safari中使用valign = top的表格 [英] Wrong rendering of <sup> in table with valign=top in Chrome and Safari

问题描述

我有以下HTML：

<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>

问题是在第二个

< sup> 不再位于文本上方，而是低几个像素。本质上， vertical-align：top 引发除上标之外的所有文本：

The problem is that in the second

the <sup> is no longer positioned above the text but a few pixels lower. In essence the vertical-align:top raises all text except the superscripted to the top:

这不会发生在Firefox，Opera，但在Chrome和Safari（所有Windows），而不是一些字体（如Times New Roman）。

This doesn't happen in Firefox, Opera but in Chrome and Safari (all Windows) and not with some fonts (like Times New Roman).

你认为这是一个字体的问题， Webkit？
已经有一个错误报告，我附上我的测试用例，但我不知道它会被解决多快，因为该错误已经报告了三年前...

Do you think this is a problem with the font or actually a bug in Webkit? There is already a bug reported and I attached my test case but I don't know how quickly it'll be solved since that bug has been reported over three years ago...

您有解决方法的想法吗？如果可能只有CSS更改。

Do you have an idea for a workaround? If possible with only CSS changes.

UPDATE

并且大多数显示与使用 sup 标记相同。

I tried the suggested solutions and most of them display the same as using a sup tag.

我创建了 fiddle 以显示不同的实施方式。

I created a fiddle to show the different implementations.

Chrome错误报告： http://code.google.com/p / chromium / issues / detail？id = 23634

The Chrome bug report: http://code.google.com/p/chromium/issues/detail?id=23634

推荐答案

避免使用 / code>元素，因为它会导致各种问题，从来不会真正产生一个排版正确的上标。

Avoid using the sup element, since it causes various problems and never really produces a typographically correct superscript.

如果你只需要superscript 2在你的文档， SUPERSCRIPT TWO character as as，²，或使用实体引用& sup2; 。

If you only need superscript 2 in your document, just use the SUPERSCRIPT TWO character either as such, "²", or using the entity reference ². This means using a text character designed by a typographer to suit the font design.

如果您需要各种类型的上标，并且不能将所有的上标表示为上标字符，则更好地使用 span 元素和样式，减少字体大小并提高字符 - 使用相对定位而不是 vertical-align （这倾向于引起不均匀的线间距并且有时可能干扰在其他地方设置的垂直对准）。示例：

If you need superscripts of various kinds and cannot represent all of them as superscript characters, it is better to use span elements and styling that reduces font size and raises the characters – using relative positioning rather than vertical-align (which tends to cause uneven line spacing and may sometimes interfere with vertical alignment set elsewhere). Example:

span.sup {
    font-size: 80%;
    position: relative;
    bottom: 1ex;
}

这篇关于< sup>的渲染错误在Chrome和Safari中使用valign = top的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！