尝试“Eric Meyer Reset”时,我偶然发现了一个有关font-size:100%
声明的问题,该声明用于重置所有合适元素的字体大小。 font-size:100%
表示元素应继承其父级的font-size
属性,但IEt中的<sub>
和<sup>
元素及其后代(在6,7,8和9th版本中进行测试)不是这种情况。
例如(或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似乎是另一个实现技巧,IE在Web设计人员上扮演这些元素的since this is not the only glitch。我的猜测是IE在
<sub>
和<sup>
元素上应用了自己的硬连线样式,这使得它们的内容除了具有下标/上标功能之外还更小,但我无法找到一种方法来重置此行为(如果有的话) 。//请直接回答此问题,“使用UA特定样式表”之类的建议可能会满足您的帮助感,但不满足您的要求:-) ..EDIT:好的,这种恳求最终使我反感,但我想在此至少说明一个关于此主题的答案。
编辑:看起来IE(直到IE9都是所有版本)将
<sub>
和<sup>
及其子代的字体大小乘以一些可变系数(根据字体大小,在 0.6-0.8 之间)。原因如下:当在
font-size:15px
标签及其所有后代上设置了固定大小(例如<sup>
)时,它们的字体大小都在10px左右(≅ 0.7 ×15px)。但是,当设置相对大小(例如font-size:100%
)时,系数效果从<sup>
元素传播到其后代–因此,第一级后代的字体大小约为70%(≅ 0.7 ×的100%其<sup>
父级),第二级后代的字体大小约为50%(≅ 0.7 × 0.7 ×<sup>
祖先的100%),依此类推。当使用font-size:inherit
时,这种传播会中断,因为这意味着该元素应该与它的父元素具有完全相同的大小–这适用于<sup>
元素的后代,但IE仍然给<sup>
元素本身提供比其父元素更小的字体大小元素确实有。可以在this example上看到参与IE的系数理论:-)。还要将其与任何“符合标准的”浏览器进行比较。
最佳答案
到目前为止,似乎唯一的“解决方案”是在样式表中保留font-size:100%
reset-declaration,并且仍然具有可接受的子/上标:
<span>
。从语义上讲绝对不是一个好主意→被淘汰。 font-size:inherit
至少使<sub>
或<sup>
的后代在默认情况下具有相同的大小在IE≥8中被接受。 解决方案#2 ,这可以解决问题(确保可以对其进行调整,但仅是概念上的调整):
<!--[if IE]>
<style>
sup *,sub * {font-size:120%; font-size:inherit;}
</style>
<![endif]-->
如果您不追求最高性能(请参阅
*
selector performance issue)。
关于internet-explorer - IE中<sub>或<sup>及其子代的相对字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6804383/