Question

尝试“Eric Meyer Reset”我偶然发现了一个有关font-size:100%声明的问题，以重置所有合适元素的字体大小。 font-size:100%表示元素应该继承其父级的font-size属性，但和元素及其后代在IE中的情况并非如此（在6中测试， 7,8和9版）。

例如（或this live example on a playground）：

// 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在webdesigners上播放，since this is not the only glitch这些元素。我的猜测是IE在和元素上应用了一些自己的硬连线样式，这使得它们的内容更小，除了上/下标，但我找不到重置的方法这种行为，如果存在的话。

//请直接回复此问题，像“使用UA特定样式表”这样的建议可能会满足您的帮助，但不满足主题:-) ..EDIT：好的，这个请求我终于反对了我，但我想在这里说出至少一个答案。

编辑：看起来IE（所有版本直到IE9）将和及其后代的字体大小与一些变量系数相乘（在......之间）强> 0.6 - 0.8 取决于字体大小。）

原因如下：当font-size:15px标记及其所有后代都设置了固定大小（例如）时，它们的字体大小都在10px左右（≅ 0.7 ×15px）。但是，当设置相对大小时（例如font-size:100%），系数效果会从元素传播到其后代 - 因此第一级后代的字体大小约为70％（ ≅ 0.7 ×父母的100％），二级后代的字体大小约为50％（≅ 0.7 × 0.7 ×{100}的祖先）等等。当使用font-size:inherit时，此传播会中断，因为这意味着该元素应与其父元素具有完全相同的大小 - 这适用于元素的后代，但元素本身IE的字体大小仍然比其父元素的字体大。

可以在this example上看到参与IE的系数理论:-)。还可以将其与任何“标准兼容”浏览器进行比较。

Answer 1

似乎唯一的“解决方案”是将font-size:100% reset-declaration留在样式表中并且仍然具有可接受的子/上标，到目前为止：

使用不同的元素来设置子/上标的样式，例如： 。根据语义肯定不是一个好主意→淘汰。
使用特定于UserAgent的样式表，条件评论最多（这是我担心的，因为我不必在IE≥7中使用它们，直到现在）并且明确地重新设置每个后代以补偿“系数”效果“→它不值得： - ）。
保持原样，所以每个人都可以看到IE有自己的规则（理想情况/天真地这可能迫使他们在下一个版本中修复它）并使用font-size:inherit至少拥有{{1的后代默认情况下，在IE≥8→已接受中，或的大小相同。

解决方案＃2 ，这可以解决问题（确保它可以调整，但只是概念）：

<sup>

如果您不努力获得最佳效果（请参阅* selector performance issue）。

Answer 2

我没有测试它，但它到目前为止有效：

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

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

2 个答案: