CSS 重置后两个元素的相同样式不同（仅限 IE）

Question

CSS 重置后的事件，我发现 IE 显然将一些默认样式附加到 SUP 标记。在以下示例中，SUP 标记仍略小于样式化的 SPAN 标记。有谁知道这方面的调整吗？

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"/>
        <style 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>

Answer 1

http://jsfiddle.net/utwSv/

您应该养成为字体指定百分比大小的习惯，尤其是在使用 CSS 重置（以百分比设置字体大小）之后。

在上面的示例中，如果我将子元素的字体大小设置为 120%，它对我来说没问题。但在那之后我也改变了 h1 标签的大小。如果我使用以像素为单位的固定字体大小，则子元素仍会呈现较小的字体。相反，如果我将其设置为百分比值，它将正确显示。

注意，我还包括 CSS 字体的 YUI 重置。