< sub>的相对字体大小或者< sup>和他们在IE中的后代 [英] relative font-size of <sub> or <sup> and their descendants in IE

问题描述

尝试 Eric Meyer重置I偶然发现有关 font-size：100％声明的问题，以重置所有合适元素的字体大小。 font-size：100％表示元素应该继承其父级的 font-size 属性，但这不是案例与< sub> 和< sup> 元素及其在IE中的后代（在6,7中测试） ，第8版和第9版）。

Trying the "Eric Meyer Reset" I stumbled across an issue concerning the font-size:100% declaration to reset the font size of all suitable elements. font-size:100% means the elements should inherit font-size property of their parent, but this is not the case with the <sub> and <sup> elements and their descendants in IE (tested in 6,7,8 and 9th version).

例如（或 this在操场上的实例）：

// 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上播放，因为这不是这些元素的唯一故障。我的猜测是IE在< sub> 和< sup> 元素上应用了一些自己的硬连线样式除了上/下标之外，它还使其内容更小，但我找不到重置此行为的方法，如果存在的话。

It seems like just another implementation trick, that IE plays on webdesigners, since this is not the only glitch of these elements. My guess is that IE applies some own hard-wired styling on the <sub> and <sup> elements which makes their content smaller in addition to being sub-/superscripted, but I can't find a way to reset this behaviour, if any exists at all.

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

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

It looks like IE (all versions till IE9) multiplies the font size of the <sub> and <sup> and their descendants with some variable coefficient (sth between 0.6 – 0.8 depending on the font-size).

推理如下：在<上设置固定大小（例如 font-size：15px ） code>< sup> 标记及其所有后代，它们的字体大小都在10px左右（≅ 0.7 ×15px）。但是，当设置相对大小时（例如 font-size：100％），系数效果将从< sup>传播。 元素下至其后代 - 因此第一级后代的字体大小约为70％（≅ 0.7 ×<100％的< sup> parent），二级后代的字体大小约为50％（≅ 0.7 × 0.7 ×其< sup> ancestor）等等。当使用 font-size：inherit 时，这种传播会中断，因为这意味着该元素应该与其父元素具有完全相同的大小 - 这适用于<$ c的后代$ c>< sup> 元素，但IE的字体大小仍小于< sup> 元素本身确实有。

The reasoning is following: when a fixed size (e.g. font-size:15px) is set on the <sup> tag and all its descendants, they all have the font size around 10px (≅ 0.7 × 15px). But, when a relative size is being set instead (e.g. font-size:100%), the coefficient effect is propagated from the <sup> element down to its descendants – so 1st-level descendant has the font size around 70% (≅ 0.7 × 100% of its <sup> parent), 2nd-level descendant has the font size around 50% (≅ 0.7 × 0.7 × 100% of its <sup> ancestor) and so on. This propagation breaks when font-size:inherit is used, since it means the element should have exactly the same size as its parent – this works for the descendants of the <sup> element, but the <sup> element itself is still given a smaller font size by IE than its parent element does have.

系数理论:-)参加IE可以在这个例子。还可以将其与任何标准兼容浏览器进行比较。

The coefficient theory :-) taking part in IE can be seen on this example. Also compare this with any of the "standard compliant" browsers.

推荐答案

这似乎是唯一的解决方案离开 font-size：100％样式表中的reset-declaration，目前仍然有可接受的子/上标：

It seems like the only "solution" to leave the font-size:100% reset-declaration in the stylesheet and still have acceptable sub-/superscripts is so far either to:

• 使用不同的元素来设置子/上标的样式，例如<跨度> 。根据语义肯定不是一个好主意→淘汰。


• 使用特定于UserAgent的样式表，条件评论最好（这是我担心的，因为我不必在IE≥7时使用它们，直到现在）并且明确地重新设置每个后代以补偿系数效应→它不值得： - ）。


• 保持原样，这样每个人都可以看到IE有自己的规则（理想情况/天真地这可能迫使他们在下一个版本中修复它）并使用 font-size：inherit 至少要有< sub> 或< sup> 的后代默认情况下，IE≥8→接受。

• Use a different element for styling the sub-/superscripts, e.g. <span>. Definitely not a good idea in the light of semantics → eliminated.
• Use an UserAgent-specific stylesheet, conditional comments at best (which is what I was worried about, because i didn't have to use them for IE ≥ 7, until now) and explictly restyle each descendant to compensate the "coefficient effect" → it's not worth it :-).
• Leave it as it is so everybody can see IE has its own rules (ideally/naively this could force them to fix it in the next version) and use font-size:inherit to have at least the descendants of <sub> or <sup> be the same size by default in IE ≥ 8 → accepted.

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

solution #2, this will do the trick (sure it can be tuned up, but just the concept):

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

如果您没有争取最大性能（请参阅 * 选择器性能问题）。

provided you don't strive for maximum performance (See the * selector performance issue).

这篇关于&lt; sub&gt;的相对字体大小或者&lt; sup&gt;和他们在IE中的后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！