DocType导致div过高(未执行页边空白顶部)



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

我的问题:由于这个特定的doctype,它导致一些div位于比它们应该位于的更高的位置(y轴)。这只发生在IE中。你知道我能做些什么来解决这个问题吗?也许是CSS重置或IE破解?

导致此错误的doctype是:

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

我使用这个doctype是因为它使IE显示的Arial文本与其他浏览器的字体大小相同(其他方面不同),但它也使div过高。

  1. 使用HTML5 doctype:<!DOCTYPE html>。doctype只是为了防止怪癖模式(而不是修复所有的不一致)。DTD设置要使用的HTML(HTML4、XHTML等),并告诉浏览器标记的有效性。DTD未在HTML5 doctype中使用。

  2. 请确保doctype中<之前没有空格。包括字符、空格或换行符中的任何内容。在IE中,即使是单个字符之前也会导致怪癖模式。

  3. 检查您提到的<div>是否使用负上边距来补偿在怪癖模式下呈现页面或未重置样式时导致的正文填充/边距。如果是,请将其移除。开发人员往往会忘记浏览器呈现内容不一致的事实,包括body边距的事实。

此doctype:

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

导致IE中的怪癖模式。

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

你应该让IE9使用DirectWrite(这是一种"不同"的文本呈现技术)。Firefox>=版本4也使用DirectWrite。IE9(在标准模式下)和Firefox之间的文本呈现应该非常相似。如果不是,就说明出了问题。

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

您应该使用任何触发标准模式的doctype,例如HTML5 doctype:

<!DOCTYPE html>

然后,您应该在<head>中添加这个元标记,以强制IE表现为IE8,并完成GDI文本呈现:

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

这样,IE将使用IE8模式,这是从怪癖模式(即IE5.5)的一个巨大进步

我已经暗示了这一点,但我必须明确地说:请不要为了避免DirectWrite而强制使用IE8模式。相反,请接受IE9新的改进的文本渲染!

最新更新