<sup>是用来定义上标文本的标签,平常很少用到,基本上属于边缘标签.不过今天在项目中遇到,在调试过程中发现这小子比较难伺候,这里模拟了个简单的代码环境:
提示：你可以先修改部分代码再运行。
从代码中可以看到我定义了一个宽300px,高20px,字体大小为12px,行高为1.5em的模型,再来看看它在各浏览器中的表现:
1. IE6,7
2.FF
3.chrome
从图中对比来看,IE是完全符合我设想的效果,但在FF和chrome下有2个问题:(谁才是对的呢?…囧)
1.正常文本和上标文本的字体大小相同,都为12px(明显是受到了font:12px/1.5…的影响,在未定义字体的时候两者是大小是有区别的);
2.模型的高度超过了定义的20px;
调试:
经过反复的调试最终得到一个并不完美但可以让人接受的效果(用了好多hack,orz):
提示：你可以先修改部分代码再运行。
在调试中发现:定义sup的字体大小,只对IE和FF有效,chrome无视sup的font-size属性…
恩,是的,这里是为了排版的需要而放弃视觉的效果,最初的那个高度超过的设定的数值
最后改的在Chrome中还是不对，效果还没最初那个好