IE中<sub>或<sup>及其后代元素的相对字体大小

Question

尝试使用“Eric Meyer Reset”时，我遇到了一个问题，涉及到font-size:100%声明来重置所有适当元素的字体大小。 font-size:100%意味着元素应该继承其父级的font-size属性，但是在IE（测试了6,7,8和9版本）中，<sub>和<sup>元素及其后代并非如此。

例如(或在游乐场上进行实时演示)：

// 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>

似乎这只是IE用于欺骗Web设计师的另一个实现技巧，因为这些元素存在不止一个故障。我的猜测是IE对<sub>和<sup>元素应用了一些自己的硬编码样式，使它们的内容变小，除了上下标之外，但我找不到重置此行为的方法（如果有的话）。//请直接回答此问题，像“使用特定于UA的样式表”之类的建议可能会满足您的帮助感，但不能满足主题:-) ..编辑：好吧，这个请求最终变成了反对我，但我至少想在这里陈述这个主题的一个答案。编辑：看起来IE（所有版本直到IE9）将<sub>和<sup>及其后代的字体大小与某些可变系数相乘（取决于字体大小，在0.6-0.8之间）。

当在标签及其所有子元素上设置固定大小（例如font-size:15px）时，它们的字体大小都约为10px（≅0.7×15px）。但是，当设置相对大小（例如font-size:100%）时，系数效应从元素传播到其后代 - 因此，第一级后代的字体大小约为70％（≅父亲 <sup>的0.7×100％），第二级后代的字体大小约为50％（≅0.7 × 0.7 × 100％其<sup>祖先），依此类推。当使用font-size：inherit时，这种传播会中断，因为它意味着元素的大小应与其父元素完全相同 - 这适用于元素的后代，但 IE仍然会给元素比其父元素更小的字体大小。

IE浏览器中涉及系数理论的内容可以在this example上看到。同时，与任何“标准兼容”的浏览器进行比较。

- Adam

Answer 1

似乎唯一的“解决方案”是保留样式表中的 font-size:100% 重置声明，并且仍然具有可接受的上/下标，目前只能采取以下两种方式之一：

• 使用其他元素来为上/下标设置样式，例如<span>。从语义学的角度来看，这绝不是一个好主意→ 被淘汰了。
• 使用用户代理特定的样式表，在最好的情况下使用条件注释（这正是我担心的，因为我不得不为IE ≥ 7使用它们，直到现在），并明确地重新设计每个后代以补偿“系数效应”→ 这不值得 :-)。
• 保持现状，这样每个人都可以看到IE有自己的规则（理想情况下/天真地认为，这可能会迫使他们在下一个版本中进行修复），并使用font-size:inherit，使得至少IE ≥ 8中的<sub>或<sup>的后代默认大小相同→ 已接受。

---

解决方案＃2，这将解决问题（当然它可以调整，但概念只是这样）：

<!--[if IE]>
<style>
  sup *,sub * {font-size:120%; font-size:inherit;}
</style>
<![endif]-->

只要你不追求最大性能（参见 * 选择器的性能问题），就可以提供这个功能。

- Adam

---

由于某些原因，它对我不起作用，我不得不在IE6-7中为字体大小添加!important，然后它才能正常工作。谢谢！ - Camilo Martin

Answer 2

我没有测试过，但到目前为止它可以工作：

sup,
sub {
    font-size: inherit;   /* all browser */
    font-size: 120%\0/;   /* wie only */
}

- Cypher