9

尝试“ Eric Meyer 重置”时，我偶然发现了一个关于font-size:100%重置所有合适元素的字体大小的声明的问题。font-size:100%意味着元素应该继承其父级的属性，但在 IE 中， and元素及其后代font-size并非如此 （在 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 在网页设计师身上发挥的作用似乎只是另一种实现技巧，因为这不是这些元素的唯一故障。我的猜测是，IE 在<sub>and<sup>元素上应用了一些自己的硬连线样式，这使得它们的内容除了被子/上标之外更小，但我找不到重置这种行为的方法，如果有的话。

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

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

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

在这个例子中可以看到参与IE的系数理论:-) 。还将其与任何“符合标准的”浏览器进行比较。

4

2 回答 2

2

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

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

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

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

前提是您不追求最​​佳性能（请参阅*选择器性能问题）。

于 2011-07-24T14:12:57.100 回答
0

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

sup,
sub {
    font-size: inherit;   /* all browser */
    font-size: 120%\0/;   /* wie only */
}
于 2015-05-11T15:10:13.220 回答