尝试" Eric Meyer重置 "我偶然发现了一个关于font-size:100%重置所有合适元素字体大小的声明的问题.font-size:100%意味着元件应该继承font-size父的属性,但是这是不符合的情况下 <sub>和<sup>元素和它们的后代在IE(在6,7,8和第九版测试).
例如(或在操场上的这个实例):
// CSS:
sup,span {font-size:100%;}
// HTML:
if you try this in IE, <sup>this text will be smaller <span>and this even more</span></sup>
Run Code Online (Sandbox Code Playgroud)
它似乎只是另一个实现技巧,IE在webdesigners上播放,因为这不是这些元素的唯一故障.我的猜测是IE在<sub>和<sup>元素上应用了一些自己的硬连线样式,除了上/下标之外,它们使内容更小,但我找不到重置此行为的方法,如果有的话.
//请直接回复此问题,像"使用UA特定样式表"这样的建议可能会满足您的帮助,但不满足主题:-) ..EDIT:好的,这个请求最终反对我,但是我想在这里说出至少一个对这个主题的答案.
编辑:它看起来像IE(所有版本直到IE9)相乘的字体大小<sub>和<sup>以及它们与(之间某物一些可变系数的后代0.6 - 0.8根据字体尺寸).
其理由是以下:当一个固定大小(例如font-size:15px)设置在<sup>标签及其所有后代,它们都具有围绕10px的字体大小(≅ 0.7 ×15像素).但是,当正在设定的相对大小,而不是(例如font-size:100%),将系数效应从传播<sup>元件下降到其后代-所以第一级后代具有大约70%(≅字体大小0.7其的×100%<sup>母体),第二级后代具有的字体大小在50%左右(≅ 0.7 × 0.7其的数×100%<sup> …
我有以下HTML:
<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>
Run Code Online (Sandbox Code Playgroud)
问题在于第二个问题
将<sup>不再位于上面的文字,但几个像素低.从本质上讲,vertical-align:top除了上标之外,所有文本都会引发:

这不会发生在Firefox,Opera中,而是发生在Chrome和Safari(所有Windows)中,而不是某些字体(如Times New Roman).
你认为这是字体的问题还是Webkit中的一个错误?已经报告了一个错误,我附上了我的测试用例,但我不知道它有多快会被解决,因为三年前已经报告了这个错误...
你对解决方法有什么想法吗?如果可能只有CSS更改.
UPDATE
我尝试了建议的解决方案,其中大多数显示与使用sup标签相同.
我创建了一个小提琴来展示不同的实现.
Chrome错误报告:http://code.google.com/p/chromium/issues/detail?id = 23634