Same styles on two elements are different after a CSS reset (IE only)
Event after a CSS reset, I've found that IE is apparently attaching a some default styling to the SUP tag. In the following example, the SUP tag is still slightly smaller than the styled SPAN tag. does anyone know a tweak for this?
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"/>
<s开发者_JAVA百科tyle type="text/css">
sup { font-size: 16px; vertical-align: super; }
.trademark { font-size: 16px; vertical-align: super; }
</style>
</head>
<body>
<h1>This is a <sup>®</sup> test</h1>
<h1>This is a <span class="trademark">®</span> test</h1>
</body>
</html>
http://jsfiddle.net/utwSv/
You should get in habit of give percentage size to fonts, expecially after using a CSS reset which sets fonts size in percentage.
In the example above, it works ok for me if I set a font-size of 120% for sub elements. But after that I also changed the size of the h1 tags. If I use a fixed font-size in pixels, the sub element still presents a smaller font. Instead, if I set it in a percentage value it will display correctly.
Note I also included YUI reset for CSS Fonts.
加载中,请稍侯......
精彩评论