当前位置：文江博客话题详情

HTML internet-explorer html5boilerplate

IE 和 HTML5 文档类型问题

发布于 2025-01-04 23:01:24 字数 1237 浏览 1 评论 0 原文

我正在使用很棒的 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">

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

HTML5 Boilerplate 附带了 Modernizer，我认为应该解决这个问题，但是它不起作用。根据我的“研究”（Google），我发现 IE 进入怪癖模式宽度，所以问题是......

有没有办法防止 IE 进入怪癖模式与 ?

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

编辑：这是完整的头部：

<!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">

原文

I'm using the great HTML5 boilerplate. It's a great project but I'm having some big issues rendering in IE 8 and 7 (possibly 8 but haven't tried yet)

The files have the HTML5 doctype:

<!doctype html>
<head>

But the problem is that having no full and ugly doctype like...

<!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">

I get all kind of rendering issues: centering by margin:auto doesn't work, heights, widths, martings and paddings all behave like crazy and all my layout is broken with just <!doctype> but if I switch to the old one, everything works great (well, not great, it's still IE, but as expected)

HTML5 Boilerplate comes with Modernizer which I think should fix this but it's not working. From my "research" (Google) I found that IE enters in quirks mode width <!doctype>, so the question is...

Is there a way to prevent IE going into quirks mode with <!doctype>?

Or at least not to break margins, widths, paddings, etc?

Edit: This is the full head:

<!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">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简单气质女生网名 2025-01-11 23:01:24

IE 不会进入该文档类型的怪异模式。样板文件应该解决 IE 问题，而不是引起它们。您缺少 doctype 之后的元素。添加它以查看情况是否发生变化。 HTML5 不需要它，但根据文档，如果缺少它，IE 或样板可能会变得疯狂。

另外，只需删除文档类型后面的注释，问题就会消失。

回复收藏 0 原文

魄砕の薆 2025-01-11 23:01:24

尝试将其放入标记中：

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

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

Try putting this in the <head></head> tag:

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

If it's already there, then remove it, and you may receive your desired results.

回复收藏 0 原文

初懵 2025-01-11 23:01:24

IE 不会对 HTML 文档类型产生怪癖 - 这就是重点！

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

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

但是，在 doctype 之前添加任何内容（换行符、注释等）都会。

我会检查你在做什么 - HTML5 文档类型不会让你的浏览器陷入困境。

回复收藏 0 原文

多情出卖 2025-01-11 23:01:24

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

回复收藏 0 原文

你的背包 2025-01-11 23:01:24

我不是一个太多的“奇才”，但是为 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]-->

如果这在旧版浏览器中不起作用（由于浏览器读取两个doctypes）你可以尝试这个：

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

I'm not too much of a "wiz", but wouldn't it work to do conditional html and declare an HTML 4.01 doctype for IE8 and below like this:

<!-- 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]-->

If that does not work in older browsers (due to the browser reading two doctypes) you could try this:

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

回复收藏 0 原文

云裳 2025-01-11 23:01:24

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

回复收藏 0 原文

长途伴 2025-01-11 23:01:24

我认为您发布的全头标记没有任何问题。这是广泛用于样板文件的标准标记，其中包括 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 上观察到的唯一奇怪的事情是，当我使用 时，网络字体（我的应用程序中的所有四种字体）有时会无法呈现> 而不是。

仅供参考：我刚刚检查并发现 HTML5 Boilerplate 项目具有 HTML5 Boilerplate 项目。 com/h5bp/html5-boilerplate/commit/13f17a737a7429bc102fe5f0991313f9f9162da7“ rel="nofollow">于 2013 年 9 月 24 日删除了对 IE 条件注释的支持。我无法确认条件注释何时引入项目，但可以看到项目移植到Github时曾经在body标签周围2010 年 1 月 24 日。

I see nothing wrong with the full head markup you posted. This is a standard markup widely used in boilerplates that include Modernizr, a nifty JavaScript library used to detect browser features.

<!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>

I use it in my current app and get no problems on any browser. Though I use it like so:

<!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>

For the sake of testing the IE conditional comments, I tested on IE9, IE8 and IE7, with both the uppercase and lowercase doctype, just for double-checking.

The only odd thing I have observed on IE7 was that webfonts (all four in my app) would fail to render sometimes, when I used <!doctype html> instead of <!DOCTYPE html>.

FYI: I've just checked and see that the HTML5 Boilerplate Project has removed support for IE conditional comments on Sept 24th 2013. I can't confirm when conditional comments were introduced to the project but can see that it used to be around the body tag when the project was ported to Github on Jan 24th 2010.