边缘标签:sup

Bell — Tue, 12 Jan 2010 14:49:33 +0000

^{是用来定义上标文本的标签,平常很少用到,基本上属于边缘标签.不过今天在项目中遇到,在调试过程中发现这小子比较难伺候,这里模拟了个简单的代码环境:}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>temp</title> <style type="text/css" media="all"> * { margin:0; padding:0; font:12px/1.5 Arial, Helvetica, sans-serif;} body{ background:url(images/grid.png) no-repeat;} .sup-tm{ width:300px; margin:20px; border:1px solid #ff6600; line-height:20px; overflow:hidden;} </style> </head> <body> <div class="sup-tm"> 123<sup>123</sup> </div> </body> </html>

提示：你可以先修改部分代码再运行。

从代码中可以看到我定义了一个宽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):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>temp</title> <style type="text/css" media="all"> * { margin:0; padding:0; font:12px/1.5 Arial, Helvetica, sans-serif;} body{ background:url(images/grid.png) no-repeat;} .sup-tm{ width:300px; margin:20px; border:1px solid #ff6600; line-height:20px; overflow:hidden;} /*ff*/ .sup-tm sup{ font-size:10px; vertical-align:top;} /*IE*/ html*.sup-tm sup{ font-size:12px; vertical-align:super;} /*chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0){.sup-tm sup{ vertical-align:top;}} </style> </head> <body> <div class="sup-tm"> 123<sup>123</sup> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在调试中发现:定义sup的字体大小,只对IE和FF有效,chrome无视sup的font-size属性…

IInterest » 边缘标签

边缘标签:sup