这个 doctype 有什么问题答案

【问题标题】：Anything wrong with this doctype这个 doctype 有什么问题
【发布时间】：2012-09-06 10:28:49
【问题描述】：

我的 WordPress 网站存在一些主要的 IE 问题，包括 jQuery、box-shadow 和其他奇怪的 CSS 问题。

我的 doctype 会受到责备吗？

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>NA-net | NA&#039;s Communication Network</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven-child/style.css" />
<link rel="pingback" href="http://121.5.7.109/na_comm_new/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://121.5.7.109/na_comm_new/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="NA-net &raquo; Feed" href="http://121.5.7.109/na_comm_new/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="NA-net &raquo; Comments Feed" href="http://121.5.7.109/na_comm_new/?feed=comments-rss2" />
<link rel='stylesheet' id='wp_sidebarlogin_css_styles-css'  href='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/style.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='bbp-default-bbpress-css'  href='http://121.5.7.109/na_comm_new/wp-content/plugins/bbpress/bbp-theme-compat/css/bbpress.css?ver=2.1.2' type='text/css' media='screen' />
<link rel='stylesheet' id='slider-css'  href='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/css/slider.css?ver=1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/easing-slider/js/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://121.5.7.109/na_comm_new/wp-content/plugins/sidebar-login/js/blockui.js?ver=1.0'></script>
<script type='text/javascript'>

【问题讨论】：

尝试此文档类型一次并尝试 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我猜它只是在示例中被切断了，但是您的最后一个脚本标签没有关闭。
“我的 doctype 会受到责备吗？” - NOP，“更改文档类型是否可以解决问题” - NOP，“问题将如何解决” - 隔离每个问题，使用开发人员工具查看导致问题的属性，回发每个问题并且只回复相关代码.
@Jawad 老实说，我非常有信心这只是一个问题，因为所有这些问题都是同时发生的。
好的，但究竟是什么问题？ “其他奇怪的 CSS 问题”并没有给我们足够的线索来找出解决方案。

标签： css internet-explorer internet-explorer-9 doctype

【解决方案1】：

Doctype 还可以，但我建议使用这个：

<!DOCTYPE html>
<!--[if lt IE 6]>      <html class="lt-ie9 lt-ie8 lt-ie7 lt-ie6"> <![endif]-->
<!--[if IE 6]>         <html class="lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->   
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="modern"> <!--<![endif]-->
<head>
...

【讨论】：

【解决方案2】：

如果您的代码符合标准，则您的 doctype 不太可能导致问题。 （显然，快速检查的方法很简单：将其更改为 HTML4.01 文档类型，看看是否有任何纠正！）“通用”HTML 文档类型应该在所有现代浏览器中触发标准模式，甚至在存在 any 文档类型的情况下，旧版浏览器应切换到完全或接近标准模式。鉴于您在问题中标记了 IE9，您的问题可能是由于 IE9 仅部分符合 CSS 2.1 之后的标准。我建议尝试单独隔离您的问题。

Box-shadow： 根据MDN，您可能需要显式设置border-collapse:seperate 才能使其在IE 中工作。
其他： 我看到你使用条件 cmets 来嗅探 IE6-8。也许您需要将此扩展到 IE9？还要注意任何讨厌的内联 CSS hacks...

【讨论】：