13

我正在使用出色的 HTML5 样板。这是一个很棒的项目，但我在 IE 8 和 7 中渲染时遇到了一些大问题（可能是 8，但还没有尝试过）

这些文件具有 HTML5 文档类型：

<!doctype html>
<head>

但问题是没有完整而丑陋的文档类型，比如......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

我遇到了各种渲染问题：按边距居中：自动不起作用，高度、宽度、martings 和 paddings 都表现得像疯了一样，我所有的布局都被破坏了，<!doctype>但是如果我切换到旧的，一切都很好（好吧，不是很好，它仍然是 IE，但正如预期的那样）

HTML5 Boilerplate 带有 Modernizer，我认为应该可以解决这个问题，但它不起作用。从我的“研究”（谷歌）中，我发现 IE 进入了 quirks mode width <!doctype>，所以问题是......

有没有办法防止 IE 进入怪癖模式<!doctype>？

或者至少不破坏边距、宽度、填充等？

编辑：这是完整的头部：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
4

8 回答 8

17

IE 不会使用该文档类型进入怪癖模式。样板文件应该修复 IE 问题，而不是导致它们。您缺少<html>文档类型之后的元素。添加它以查看情况是否发生变化。HTML5 不需要它，但如果缺少它，根据文档，IE 或样板文件可能会发疯。

此外，只需删除 doctype 之后的注释，这应该会使问题消失。

于 2012-02-13T18:19:21.110 回答
11

尝试将其放入<head></head>标签中：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

如果它已经存在，则将其删除，您可能会收到所需的结果。

于 2012-02-13T18:13:56.447 回答
8

IE 不会对 HTML doctype 产生怪癖——这就是重点！

这个新的 DOCTYPE 的好处在于，所有当前的浏览器（IE、FF、Opera、Safari）都会查看它并将内容切换到标准模式——即使它们没有实现 HTML5。这意味着您可以从今天开始使用 HTML5 编写您的网页，并让它们持续非常非常长的时间。

(http://ejohn.org/blog/html5-doctype/)

但是，在文档类型（换行符、注释等）之前有任何内容。

我会检查你在做什么——HTML5 doctype 不会让你的浏览器出现怪癖。

于 2012-02-13T19:00:53.180 回答
1

尝试将文件另存为不带 BOM 的 UTF-8。它帮助了我。

于 2014-10-17T13:05:09.087 回答
0

我不是一个“奇才”，但它不会像这样为 IE8 及以下版本做条件 html 并声明一个 HTML 4.01 doctype：

<!-- HTML 5 doctype -->
<!doctype html>

<!-- HTML 4.01 Doctype -->
<!--[if lte IE 8]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]-->

如果这在旧浏览器中不起作用（由于浏览器读取两种文档类型），您可以尝试以下操作：

<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>
于 2012-02-13T18:16:04.217 回答
0

它很可能会进入与条件注释的兼容模式。我们建议您x-ua-compatible在 .htaccess 文件或其他服务器配置文件中设置标头服务器端。

于 2012-02-16T14:45:42.887 回答
0

我认为您发布的完整头部标记没有任何问题。这是一个广泛用于样板的标准标记，包括Modernizr，一个用于检测浏览器功能的漂亮 JavaScript 库。

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

我在我当前的应用程序中使用它并且在任何浏览器上都没有问题。虽然我像这样使用它：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>

为了测试 IE 条件注释，我测试了IE9,IE8和IE7，同时使用了大写和小写的doctype，只是为了进行双重检查。

我观察到的唯一奇怪的事情IE7是，当我使用<!doctype html>而不是<!DOCTYPE html>.

仅供参考：我刚刚检查并看到HTML5 Boilerplate 项目已于2013 年 9 月 24 日删除了对 IE 条件注释的支持。我无法确认何时将条件注释引入项目，但可以看到它曾经是在正文周围项目于2010 年 1 月 24 日移植到 Github 时的标记。

于 2014-01-16T15:55:39.123 回答
-4

尝试 DOCTYPE html 而不是 doctype html doctype 标签区分大小写，这就是原因。

于 2013-03-01T07:41:50.220 回答