字体大小：在 IE 8 怪癖与标准模式下，大号看起来不同答案

【问题标题】：font-size: large looks different in IE 8 quirks vs. standards mode字体大小：在 IE 8 怪癖与标准模式下，大号看起来不同
【发布时间】：2013-06-05 23:03:20
【问题描述】：

我正在开发一个当前需要 IE 8 quirks 模式才能正确呈现的内部企业网站，并对其进行修改以使其以 IE 8 标准模式呈现。困扰我的一个问题是 font-size: large 的外观截然不同（可能还有其他字体设置，这是我注意到的第一个）。

使用此 HTML 作为示例：

<html>
    <head>
        <title>IE 8 Quirks Font Size</title>
        <style type="text/css">
            #testDiv
            {
                font-size: large;
            }
        </style>
    </head>
    <body>
        <div id="testDiv">Here is some text</div>
        <div>And some unstyled text</div>
    </body>
</html>

如果您在 IE 8 中使用 quirks 模式与标准模式查看，外观上的差异如下：

显然，整个网站的样式都采用了 quirks 模式的布局。我正在寻找的是：

有关 IE 怪癖模式与标准模式如何区别对待字体的文档
关于如何调整 CSS 使其呈现像以前一样的一些说明
理想情况下，一些神奇的站点范围的 CSS 基本上可以使字体呈现，就好像怪癖模式仍在播放一样

【问题讨论】：

尝试使用精确的字体大小而不是“大”。对于即时font-size: 12px 或font-size: 12pt
font-size: 12px 是否等同于 font-size: large 一致？否则我看不出这对我有什么帮助。我试图避免在网站上找到每个字体大小并逐个像素地调整它。
样式都是内联的吗？如果没有，您可以将样式表中的large 替换为不同的值。
样式无处不在——内联，各种样式表。这是一个大型网站。这就是为什么我正在寻找可以在全球范围内应用的东西。如果没有办法做到这一点，我会单独经历每一个，但如果可以的话，我宁愿避免这种痛苦。
@RationalGeek 好吧，首先，您不应该内联那么多样式，尤其是因为它是一个大型站点。使用像素对您有何帮助？您可能会喜欢使用large，但这根本不可取。为什么您必须在网站上找到每种字体大小并进行调整？如果你的 CSS 写得很好，那么你应该只需要改变一两个地方的大小。无论如何，我再次看不到您需要调整什么。像素只是相对较大，因此实际上调整会更少。

标签： html css internet-explorer quirks-mode

【解决方案1】：

在 quirks 模式下使用 font-size 的问题是，当使用 medium、large、x-large 等时，浏览器总是将字体显示为比标准模式大一级。

这意味着 quirks 模式下的 large 与标准模式下的 x-large 相同。

尝试将您的代码更改为：

<html>
    <head>
        <title>IE 8 Quirks Font Size</title>
        <style type="text/css">
            #testDiv
            {
                font-size: x-large;
            }
        </style>
    </head>
    <body>
        <div id="testDiv">Here is some text</div>
        <div>And some unstyled text</div>
    </body>
</html>

这应该在 IE 8 标准模式下为您提供与当前 CSS 在 Quirks 模式下相同的结果。

你可以在这里阅读： http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

字体大小属性的关键字值

font-size 属性的 medium 值与默认法线匹配字体大小。

该属性的关键字值包括xx-small、x-small、small、中、大、x 大和 xx 大。与早期版本的 Internet Explorer，这些值没有直观地定义。这 medium 值不是默认的正常字体大小；小是默认。

【讨论】：

这更像是我正在寻找的信息类型。谢谢。

【解决方案2】：

我不知道这是否会有所帮助，但您可以尝试使用 EMS 设置相对测量

您可以使用 www.pxtoem.com 获取基本字体大小并将其设置为您可能需要的大小

然后像这样在 html 元素上设置基本字体大小 html { font-size:1em; } /* 1em 使所有元素的字体大小约为 16px，这通常是浏览器的默认值 */

然后，在要更改其大小的元素上再次设置字体大小，但尽量避免嵌套您的 EM 字体大小，IE 避免

<div class="parent" stlye="font-size: 1.5em;">
    <div class="child-nested" style="font-size: 1.8em;"><!-- try to avoid this -->
    </div>
</div>

最好在您的父级上设置字体大小，这样您就知道嵌套的位置，并尝试计算出该容器内的哪些内容将采用字体大小，这样您就可以更好地解决这个问题。用于重置文档根字体大小的 REMS 还没有得到足够好的支持。

或者，您可以按百分比增加字体大小，例如 110%、120% 等。

P.S { 永远不要将你的样式与 HTML 内联，为了简洁起见，我只是这样做了 }

希望对你有帮助

【讨论】：

这可能是解决方案的一部分，但它有问题。如果您查看我的图片，两种模式之间的无样式字体大小几乎相同。因此，仅将整个站点的字体大小更改为更高的相对起点可能是行不通的。但也许我应该从那里开始调整。
我刚刚对 IE 怪癖/标准模式进行了“简要测试”，我看不到任何文本变化问题，具体取决于我在 codepen.io/seraphzz/pen/xrzJi 和quirks/standards mode 它看起来一样，虽然我不知道整个 HTML 结构以及在哪里设置了哪些字体大小，但对我来说看起来没问题。希望这有助于进一步。此外，如果您不需要 16px 作为基础，只需更改 HTML 元素上的基本字体大小，如果站点具有内联样式，则可能需要一些混乱来删除这些样式并进行标准化，但如果设置为CSS。
您在该测试中使用了 em。我的问题是指命名的尺寸，例如“大”。
好吧，通过使用“大”作为您的测量选择，您依赖浏览器为您指定字体的大小，这在浏览器/模式之间可能是不稳定的，就好像您要指定诸如EMS之类的“长度”测量，然后您将强制执行更具体的相对测量单位。如果您认为“大”是相当主观的，这实际上取决于您使用的浏览器对该测量值的解释。所以最好避免在任何地方使用这种测量方法。

【解决方案3】：

您最好在 CSS 中使用精确的字体大小 (15pt) 而不是大号。

这里有几个链接讨论使用 doctype 强制浏览器模式可能会有所帮助。此外，如果您使用的是 ASP.NET，您可能需要考虑设置 Meta 标记以强制在 IE 中输入文档。

http://hsivonen.iki.fi/doctype/

http://www.quirksmode.org/css/quirksmode.html

【讨论】：

我认为你错过了我的问题的重点。我了解如何更改标记以使其以标准模式呈现，并且我了解标记应该的样式。但是，我有一堆现有的标记，它们的样式是“字体大小：大”之类的，我试图了解如何以最简单的方式使它们看起来像以前在怪癖模式下一样。
我发布的链接讨论了使用 Doctype 强制 quirks 模式，但没有给出 exat 示例。查看以下维基百科：en.wikipedia.org/wiki/Quirks_mode。它指出，将任何内容放在 doctype 前面将强制 IE 6、7、8 和 9 中的 quirks 模式。
我不是在问如何将事物置于怪癖模式。我的问题特别是关于两种模式之间对字体大小的不同处理以及如何在标准模式下模拟怪癖模式字体大小。请重新阅读问题。
抱歉，我对您的问题的理解有误。由于浏览器在标准 vs quarks 模式下处理 css 渲染、javascript 圆顶元素和可能的 HTML 渲染完全不同，因此您可以请求您的网站使用其中一种，或者更改您的 CSS 以正确渲染而不管模式如何，这需要 CSS 更改，例如特定的字体大小。如果您仍想使用标准模式，则必须通过更改 CSS 来完成模拟怪癖模式之类的操作。 HTML/CSS 本身并没有什么可以做的。

【解决方案4】：

我建议选择 CSS 重置，网上有几个可用的。这将为您的应用程序设置基本字体以及通用 CSS 起点。最后我会告诉你学习如何使用基于 em 和 % 的可缩放字体大小。这有点高级，但如果你给自己一个机会，你可以获得使用它们的经验。大多数情况下，最终获得掌握 CSS 所需的信心是一种反复试验的练习。

哦，我也会敦促您让您的组织尽快升级到 IE 10。当您这样做时，您将获得很多很棒的东西。

【讨论】：