HTML5 DOCTYPE是否会影响CSS3效果的呈现？

Question

HTML5 DOCTYPE是否会影响CSS3效果的呈现？

7

如果将文档类型定义为 <!DOCTYPE html> （html5）或者其他类型，是否会影响css3效果（例如 animation）的渲染方式？

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

不考虑运行怪异模式，不同的文档类型如何影响CSS渲染？

欢迎提供示例。

- easwee

4个回答

0

我认为HTML5本身意味着CSS在可读性方面得到了改善，没有其他的。

- Rauzippy

1

能否再详细解释一下？它究竟如何提高可读性？语法是相同的。 - easwee

0

文档类型不应该影响这个，但是有一些库可以帮助你确定在特定客户端中可用的功能，比如Modernizr。

- johnmdonahue

0

是的，我可以从个人经验告诉你它确实如此。

由切片表格组成的HTML页面如果没有cellpadding和cellspacing，则无法使用HTML5 doctype。我不得不使用HTML4 transitional。

使用网格布局系统的HTML页面有时可以更好地与HTML5 doctype配合使用。我发现Tiny Fluid Grid不能与HTML4 transitional doctype一起使用。

- desbest

使用表格进行布局不仅是一种不好的实践，也是对<table>元素的错误用法。关于流式布局，我无法多说 - 我得去查一下。 - easwee

@easwee：我刚刚在几个常见的浏览器中尝试了Tiny Fluid Grid，并使用了几种不同的文档类型（包括HTML4 Transitional），它总是可以正常工作。表格问题可能是这个：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps - thirtydot

很高兴它对你有用。关于我所说的真实示例，它在这里。http://littersky.com使用HTML4 transitional doctype时，布局会失败。 - desbest

@desbest - 这个页面甚至没有通过HTML5验证 - 难怪它失败了。 - easwee

该页面未通过验证，因为它使用了Shadowbox灯箱插件，该插件需要rel="shadowbox[gal1]，有时会使用虚构的HTML标签属性来进行ajax操作。如果我去掉所有这些，页面就可以通过HTML5验证。我已经验证了所有页面，唯一的错误是像这样棘手的严格错误。该网站上的每个图像都有一个alt=属性，并且所有自闭合标签都以/>结尾，就像验证器所说的那样。 - desbest

它做了thirtydot？那很奇怪。在2010年设计网站时，我测试了IE8、FF3/4和Opera 10，但它并没有起作用。也许浏览器实现了HTML5规范中如何处理错误的方法之类的东西。反正我以后会重新设计这个网站。 - desbest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

就CSS渲染而言，这两种doctype几乎没有区别。

doctype的选择只会影响到验证以及采用的"浏览器模式"，包括"Quirks Mode"(怪异模式)、"Standards Mode"(标准模式或无怪异模式)、"Almost Standards Mode"(近乎标准模式或有限怪异模式)。

参见：http://hsivonen.iki.fi/doctype/

因此，XHTML 1.0 Transitional采用的是"Almost Standards Mode"，而<!DOCTYPE html>则采用的是"Standards Mode"。

*一个区别是在与table相关的小细节上，但可以很容易地进行修正。另外一个区别是涉及某些HTML5元素内嵌标题元素的处理，具体请参考table、图像和奇怪空白，以及此处。