Question

我在HTML文档中使用特定的DocType，以确保IE渲染Arial的方式与Firefox，Chrome和Safari相同。

我的问题：由于这种特定的doctype，它会导致某些div位于比它们应该更高的位置（y轴）。这只发生在IE中。你知道我能做些什么来解决这个问题吗？也许CSS重置或IE黑客？

我正在使用的doctype导致此错误：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

我使用这个doctype因为它使IE显示Arial文本与其他浏览器具有相同的字体重量（否则它不同），但它也使得div太高了。

Answer 1

使用HTML5文档类型：<!DOCTYPE html>。 doctype就是为了防止quirksmode（而不是修复所有的不一致）。 DTD是设置使用哪个HTML（HTML4，XHTML等）并告诉浏览器标记如何有效的DTD。 HTML5文档类型中未使用DTD。
确保doctype中的<之前没有空格。包括来自角色，空格或换行符的任何内容。在IE中，即使是单个字符也会导致怪癖模式。
检查您提到的那些<div>是否使用了负上边距来补偿在以怪癖模式呈现页面时或未重置样式时导致的主体填充/边距。如果是这样，删除它们。开发人员倾向于忘记浏览器渲染内容不一致的事实，包括主体具有边距的事实。

Answer 2

此doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

在IE中导致quirks mode。

我在HTML文档中使用特定的DocType来确保IE 呈现Arial的方式与Firefox，Chrome和Safari相同。

你应该让IE9使用DirectWrite（它是“不同的”文本渲染技术）。 Firefox >= version 4 also uses DirectWrite。 IE9（标准模式）和Firefox之间的文本呈现应该非常相似。如果不是，那就错了。

如果坚持使IE9使用GDI文本渲染，那么有一种比通过古老的doctype强制怪癖模式更好的解决方案。

您应该使用任何触发标准模式的文档类型，例如HTML5 doctype：

<!DOCTYPE html>

然后，您应该在<head>中添加此元标记以强制IE表现为IE8，完成GDI文本呈现：

<meta http-equiv="X-UA-Compatible" content="IE=8" />

这样，IE将使用IE8模式，这是怪异模式（IE5.5）的一个重大升级。

我已经暗示了这一点，但我必须明确说出来：请不要强制IE8模式只是为了避免使用DirectWrite。相反，拥抱IE9的新的和改进的文本渲染！