使用 html5 的 doctype 代替很长很长的 xhtml doctype 似乎成了时尚和趋势，只需写寥寥几个字符：
<!DOCTYPE html>
简单易用，而且兼容性又不错，不过毕竟IE7和IE6还是不认识它，就会出问题……
假设我们需要纵向排列几张图片，使用 table 排（不符合语义，不过总会用到），或者用 Div 排版，用之前的 doctype。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
table{border-collapse:collapse;border-spacing:0;}
div,table{background:#fc0;}/*加点颜色看的更清楚鸟*/
</style>
</head>
<body>
<!-- 图片和容器之间没有多余空格和换行符 -->
<h3>table排版</h3>
<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="img.png" /></td></tr>
<tr><td><img src="img.png" /></td></tr>
<tr><td><img src="img.png" /></td></tr>
</table>
<h3>div排版</h3>
<div><img src="img.png" /></div>
<div><img src="img.png" /></div>
<div><img src="img.png" /></div>
</body>
</html>
很好，兼容所有浏览器，Demo ：xhtml doctype
OK,切换 doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to
<!DOCTYPE html>
再打开页面瞧瞧，除IE7和IE6，其他支持 HTML5 的浏览器都在图片与容器之间出现了多余空白，DEMO：html5 doctype
不管哪些浏览器解析更正确，这总算是兼容性问题，需要统一表现。
如同我们解决常规 xhtml doctype 下的图片多余空白( Bug重现DEMO )，方法毛多类～
1.猥琐法
(1)设置容器font-size或line-height (如果容器内有文字就惨了)
div,table td{font:0/0 airal}
(2)设置容器高度，然后溢出隐藏=.=!(td设置overflow不是很靠谱，所以这方法是猥琐中的极品)
div,table td{height:80px;overflow:hidden}
2.中庸法
(1)设置图片的display属性 （单图片还行，多图横排就不靠谱了）
img{display:block}
(2)设置图片浮动属性 （原理虽一样，不过比上面靠谱）
img{float:left}
3.靠谱法
(only 1)设置图片的对齐方式
img{vertical-align:bottom}/*or bottom top and so on*/
几种方法组合起来会更靠谱，视情况而定！
思考：Style Reset
以下是html5doctor.com给出的HTML5 Reset Stylesheet
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
想法：加入 img Reset 是否会更靠谱?
img{vertical-align:middle}
补充：
正如秦歌所说，不仅 html5 的 doctype 会引发此类问题，还有 html4.01 Strict ，这应该是标准与准标准之间的问题。也正因如此，我才把这篇文章同时归类为“WEB标准”。
不管是哪个标准引发的，区别终归是区别，问题终归是问题，从这个表象我们至少可以得出结论：在 doctype 之间切换并不会一帆风顺，需要时刻小心，注意线上安全……在条件（结构及样式）成熟之后再做切换才最靠谱！
[...] 理论上，标准模式和准标准模式的区别仅在于非IE6/7浏览器对于单元格里(原文说法可能有误，经测试所有图片均受影响)图片布局的不同处理。同事渔隐做了细致地测试并给出了解决方案。 [...]
[...] 在做一个口碑专题html的时候，问同事拿了一个模板，一下是模板源码： <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>专题名字-口碑网</title> <meta name="Keywords" content="需要填写关健字…" /> <meta name="Description" content="需要填写描述，110个字符之内…" /> <meta http-equiv="X-UA-Compatible" content="ie=Edge" /> <link rel="stylesheet" type="text/css" href="http://k.kbcdn.com/global/base/base_4_2_20.css" /> <style> /*这里直接写样式*/ </style> </head> <body> <div class="yui-d0f"> <script src="http://www.koubei.com/CMS/headers/wrap/js_header.jsp?withCss=1&type=mini" type="text/javascript" charset="gbk"></script> </div> <!–content–> <div class="yui-d0f"> <div class="yui-d2f"> </div> </div> <!–content end–> <div class="yui-d2f"><script type="text/javascript" src="http://www.koubei.com/CMS/headers/new/js_footer.jsp" charset="gbk"></script></div> <!–script src="http://k.kbcdn.com/global/utilities/utilities_1_4_8.js"></script–> </body> </html> 其中第一行是这么写的：然后依次看了下口碑，淘宝，阿里，支付宝，阿里软件，阿里妈妈，百度，新浪，搜狐，Google，Yahoo等其中口碑，淘宝，支付宝，阿里，百度，Google的list页面，均使用新浪，搜狐，阿里妈妈，阿里软件，Yahoo等没有使用，淘宝和支付宝均在今年改版为似乎一时成了最流行的写法，简单，而且兼容性也不错。便更深入的了解了下doctype1.什么是DOCTYPEDOCTYPE是document type(文档类型)的简写，要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。参考文章：1.三七的用doctype激活浏览器模式 原文Activating Browser Modes with Doctype2.新首页开发PPT详解 —— HTML规范3.html5 doctype与图片多余空白4.Doctype和渲染模式对照表 [...]
[...] DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即<!doctype html>，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。 [...]
[...] DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。 [...]
[...] html5 doctype与图片多余空白 doctype对盒子模型的影响 doctype, hover, quirks mode, 文档类型 Address: [...]