Silentash-默尘 » html5 http://blog.silentash.com 尘埃默默，风雨洗礼 Tue, 24 Aug 2010 16:31:08 +0000 http://wordpress.org/?v=2.9 en hourly 1 html5 doctype与图片多余空白 http://blog.silentash.com/2010/01/html5-doctype-and-img-space/?fuckgfw http://blog.silentash.com/2010/01/html5-doctype-and-img-space/?fuckgfw#comments Fri, 08 Jan 2010 09:28:26 +0000 nunumick http://www.silentash.com/blog/?p=263 <!DOCTYPE html> 简单易用，而且兼容性又不错，不过毕竟IE7和IE6还是不认识它，就会出问题… ]]> 使用 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 之间切换并不会一帆风顺，需要时刻小心，注意线上安全……在条件（结构及样式）成熟之后再做切换才最靠谱！

Comments

  • 2010年01月15日, 陈成的博客 — 淘首页开发PPT详解 —— HTML规范 writes: [...] 理论上，标准模式和准标准模式的区别仅在于非IE6/7浏览器对于单元格里(原文说法可能有误，经测试所有图片均受影响)图片布局的不同处理。同事渔隐做了细致地测试并给出了解决方案。 [...]
  • 2010年03月3日, Isunlife's Blog » 选择什么样的Doctype？ writes: [...] 在做一个口碑专题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和渲染模式对照表 [...]
  • 2010年03月5日, HTML优化 @ Miller writes: [...] DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即<!doctype html>，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。 [...]
  • 2010年05月7日, HTML代码之细微优化 – 设计客 writes: [...] DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。 [...]
  • 2010年08月25日, Silentash-默尘 » doctype与hover伪类 writes: [...] html5 doctype与图片多余空白 doctype对盒子模型的影响 doctype, hover, quirks mode, 文档类型 Address: [...]
Copyright © 2008-2010
This feed is for personal, non-commercial use only.
]]> http://blog.silentash.com/2010/01/html5-doctype-and-img-space/?fuckgfw/feed 5