-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
613 lines (341 loc) · 25.6 KB
/
index.html
File metadata and controls
613 lines (341 loc) · 25.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Seventh.</title>
<meta name="author" content="seventh.zhao">
<meta name="description" content="当讨论 Web 标准时，一些事情总是被提及，那就是结构和表现分离的重要性。刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。 结构 是由文档中的主体部分， …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://seventhZhao.github.com">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/atom.xml" rel="alternate" title="Seventh." type="application/atom+xml">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/lib/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">Seventh.</a></h1>
<h2>Working for dream!</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:seventhZhao.github.com" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/works">Works</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/04/17/4-dot-17/">语义化你的标签</a></h1>
<p class="meta">
<time datetime="2013-04-17T20:47:00+08:00" pubdate data-updated="true">Apr 17<span>th</span>, 2013</time>
| <a href="/blog/2013/04/17/4-dot-17/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>当讨论 Web 标准时，一些事情总是被提及，那就是结构和表现分离的重要性。刚开始的时候理解结构和表现的不同之处可能很困难，特别是如果你不习惯于思考文档的语义结构时。然而，理解这点是很重要的，因为，当结构和表现分离后，用 CSS 文档来控制表现就是很容易的一件事了。</p>
<p>结构 是由文档中的主体部分，再加上语义化、结构化的标记。</p>
<p>表现 是你赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子—-毕竟不是每个人使用的都是图像化的浏览器。</p>
<p>尽可能的把结构和表现相分离。理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。</p>
<p>如今表现与结构的分离在网上还不是很普遍。大多数网站上的HTML代码既缺少语义也缺少结构。</p>
<p>用表格布局</p>
<p>为了使表现和结构相分离，你必须用 CSS 来代替表格去控制一个文档的表现。当你习惯于用表格来布局的时候，这将使你感觉很奇怪很不适应，但是，这并不像它看上去的那么困难。你可以在网上找到许多可用的帮助，它的好处太多了，所以它确实值得您去花时间去转变一下思想，这点很重要。</p>
<p>相关文章:
<a href="http://www.hotdesign.com/seybold/">Why tables for layout is stupid</a>
在 Seybold 2003 上的一个演讲幻灯演示。
语义化的 HTML</p>
<p>分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<code><span></code>来代替<code><h1></code>标记标题。</p>
<p>通过使用语义化的 HTML ，你将会使文档中的不同部分对于任何浏览器都变得有意义，无论浏览器是现今 PC 上的最新的图象化浏览器，还是不支持 CSS 的老浏览器，或者还是 Unix shell 中的文本浏览器。</p>
<p>标题</p>
<p>为了给标题做标记, 要用 <code><h1></code> 、 <code><h2></code> 、 <code><h3></code> 、 <code><h4></code> 、 <code><h5></code> 或者 <code><h6></code> ，这完全取决于标题的等级。 <code><h1></code> 是最高的等级。</p>
<p>例如:</p>
<pre><code><h1>文档标题</h1>
<h2>次级标题</h2>
</code></pre>
<h1>文档标题</h1>
<h2>次级标题</h2>
<p>段落</p>
<p>用<code><p></code>来标记段落。不要使用 <code><br /></code> 来生成段落间的空行。用 CSS 来控制段落间的空隙（Margins），这个空隙可以确保段落标记的正确无误。</p>
<p>例如:</p>
<pre><code><p>浪奔浪流，万里滔滔江水永不休，淘尽了世间事，混作滔滔一片潮流，是喜是愁，
浪里分不清欢笑悲忧，成功失败，浪里看不出有未有。爱你恨你问君知否，似大江一发不收，
转千湾转千滩，也未平复此中争斗，又有喜又有愁，就算分不清欢笑悲忧，仍愿翻百千浪，
在我心中起伏够。</p>
</code></pre>
<p>浪奔浪流，万里滔滔江水永不休，淘尽了世间事，混作滔滔一片潮流，是喜是愁，
浪里分不清欢笑悲忧，成功失败，浪里看不出有未有。爱你恨你问君知否，似大江一发不收，
转千湾转千滩，也未平复此中争斗，又有喜又有愁，就算分不清欢笑悲忧，仍愿翻百千浪，
在我心中起伏够。</p>
<p>列表</p>
<p>一些事物的罗列应使用列表来显示。在XHTML中有三种列表的方法：无序、有序和自定义。</p>
<p>无序列表, 就是我们所熟知的圆圈列表, 以 <code><ul></code>开始，以<code></ul></code>结束。每一个列表项都包含在<code><li></code>之中。</p>
<p>有序列表，以<code><ol></code>开始，以<code></ol></code>结束。</p>
<p>自定义列表有一些不同，可以用来标记一些列表项和描述，以<code><dl></code>开始，以<code></dl></code>结束。每一个被描述的项目，要包含在<code><dt></code>中，而描述的内容要包含在<code><dd></code>中。</p>
<p>例如:</p>
<pre><code><ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</code></pre>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<pre><code><ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
</code></pre>
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
<pre><code><dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>
</code></pre>
<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>
<p>引用</p>
<p>用<code><q></code>来标记简短的单行引用。Web浏览器会自动识别在<code><q></code> 之间的内容。不幸的是，IE不能识别，并且有些时候，<code><q></code>会引起一些可访问性的问题。正因为如此，一些人建议尽量不要使用<code><q></code>,手动的插入引用标记。在一个包含适当的类的<code><span></code>中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag 关于处理<code><q></code>相关问题的看法。</p>
<p>对于那些一段或者好几段的长篇引用，就应当使用<code><blockquote></code>了。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在<code><blockquote></code>中的，引用的内容还必须包含在一个元素中，通常是<code><p></code>。</p>
<p>属性cite既可以与<code><q></code>一起用，也可以与<code><blockquote></code>一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用<code><span></code>来代替<code><q></code>标记引用内容,那么你就不能使用cite属性了。</p>
<p>例如:</p>
<pre><code><p>我的座佑名<q cite="http://www.x5.com.cn/">别人的高标准，是我的基本要求。</q>.</p>
</code></pre>
<p>我的座佑名<q cite="http://www.x5.com.cn/">别人的高标准，是我的基本要求。</q>.</p>
<pre><code><p>我的座佑名<span class="quote">&#8220;别人的高标准，是我的基本要求。
&#8221;</span>.</p>
</code></pre>
<p>我的座佑名<span class="quote">“别人的高标准，是我的基本要求。”</span>.</p>
<pre><code><blockquote cite="http://www.w3cn.org/">
<p>&#8220;我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，
为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，
每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，
例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；
针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。
这是一种恶性循环，是一种巨大的浪费。&#8221;</p>
</blockquote>
</code></pre>
<p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的”浏览器大战”，为了兼容 Netscape 和 IE ，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。”</p>
<p>强调</p>
<p><code><em></code> 是用作强调的，<code><strong></code>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。</p>
<p>例如:</p>
<pre><code><p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>
</code></pre>
<p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>
<p>强调的文本通常用斜体显示, 然而，特别强调的文本通常以粗体显示。</p>
<p>表格</p>
<p>XHTML 中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。为了使数据表格有更强的访问性，了解和使用各种构造表格的组件就很重要了。比如表格标题 （<code><th></code>）、摘要（summary 属性）和首部说明 （ <code><caption></code>标签）。</p>
<p>例如:</p>
<pre><code><table class="举例" summary="1999年到2003年，列表显示中国的平均人口增长率。">
<caption>中国的年均人口的增长, 1999–2003</caption>
<thead>
<tr>
<td>&#160;</td>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="col">2003</th>
</tr>
</thead>
<tbody>
<tr>
<th>人口</th>
<td scope="row">8 861 426</td>
<td scope="row">8 882 792</td>
<td scope="row">8 909 128</td>
<td scope="row">8 940 788</td>
<td scope="row">8 975 670</td>
</tr>
<tr>
<th>增长</th>
<td scope="row">7 104</td>
<td scope="row">21 366</td>
<td scope="row">26 368</td>
<td scope="row">31 884</td>
<td scope="row">34 882</td>
</tr>
</tbody>
</table>
</code></pre>
<p>文章摘自：<a href="http://www.456bereastreet.com/lab/developing_with_web_standards/zh/#structure">用Web标准进行开发</a>
上面是上次面试后专门查找的一些内容，网络上面说到的语义化一般都知识专门强调一些比较常用的元素的语义。如果想更深更全面的了解语义化，还是得从W3C的文档说明上面着手。
下面是一些html5常用标签的说明：
<code>header</code>：标记头部区域的内容，可用于整个页面或页面中的一块区域，单个页面中可重出现。
<code>footer</code>：标记脚步区域的内容，可用于整个页面或页面中的一块区域。
<code>section</code>：Web页面中的一块区域
<code>article</code>：独立的文章内容
<code>aside</code>：相关内容或者引文
<code>nav</code>：导航类辅助内容</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/03/30/3-dot-30/">HTML结构</a></h1>
<p class="meta">
<time datetime="2013-03-30T19:55:00+08:00" pubdate data-updated="true">Mar 30<span>th</span>, 2013</time>
| <a href="/blog/2013/03/30/3-dot-30/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>最近复习HTML的基础，重新较全面的了解了HTML的结构。</p>
<p>HTML结构：</p>
<p>不同标签有不同的表现和语义功能。在最近复习的一本书（<a href="http://book.douban.com/subject/3158926/" title="豆瓣图书链接" >cssDesignPatterns</a>）中,作者按元素的功能和性质讲标签划分为四个大类：</p>
<h2>结构化块状元素：</h2>
<blockquote><p>结构化块状元素的目的是把文档结构化，方便浏览器解析出一个更好的文档视图，搜索引擎才能识别出重要的关键词，文档处理工具才能应用某些技术（如XSLT）来提取内容和转换结构，JavaScript才能更准确的获取结构进行修改。</p></blockquote>
<p>结构化元素拥有结构化的含义，却没有什么语义上的内涵，结构化元素是让浏览器和查看代码的人员了解html是如何组织的。<br/>
主要的结构化块状元素：<code>ol</code> <code>ul</code> <code>dl</code> <code>table</code> ；<br/>
支持结构化的元素：<code>li</code> <code>dt</code> <code>dd</code> <code>caption</code> <code>thead</code> <code>tfoot</code> <code>tbody</code> <code>colgroup</code> <code>col</code>。</p>
<h2>终端块状元素：</h2>
<p>终端块状元素是文档结构的终结元素，即终端块状元素中不应该有表示结构的元素。终端块状元素是文档块状结构的终端节点。主要的终端块状元素：<code>h*</code> <code>p</code> <code>blockquote</code> <code>dt</code> <code>address</code> <code>caption</code>。
终端块状元素是内容的主要容器，内容主要是指内联元素和内容。</p>
<h2>多目标块状元素：</h2>
<p>多目标块状元素兼具上面两种元素的功能，可以自由的扩展文档的结构。
HTML提供了7中元素：<code>div</code> <code>li</code> <code>dd</code> <code>td</code> <code>th</code> <code>form</code>。
比如说：当一个列表项作为终端的时候，其中的内容就成为某个列表中的一项。当列表包含了一个结构化块状元素（表格或者另一个列表）时，它从结构上就作为一个大的嵌套结构中的小节点。</p>
<p>多目标块状元素既可以包含块状元素也可以包含内容，但是不能同时包含两者。文本与内联元素的组合才构成了内容。块状元素不应该作为内联元素和文本的兄弟元素。作者将之称为<em>混合内容</em>。应当把内容放在块状元素中——而不是放在他们之间。因为当浏览器遇到混合内容的时候，它会给内容套上一个匿名容器。这是因为当块状元素是按顺序排列的，而其中穿插内容的时候，浏览器不能通识解析两者。而且我们不能对这个匿名块状元素赋予样式。</p>
<h2>内联元素：</h2>
<p>HTML提供了内联元素用于识别文本的含义、控制文本排列的顺序、向文档插入额外的内容。内联元素是文档最底级的标签，HTML中有许多语义化的标签，提供了一些默认的样式。如：<code>code</code> 会被解析为等宽字体，还有<code>em</code> <code>strong</code>元素会对内容进行强调。</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/03/26/haslayout/">Haslayout</a></h1>
<p class="meta">
<time datetime="2013-03-26T15:35:00+08:00" pubdate data-updated="true">Mar 26<span>th</span>, 2013</time>
| <a href="/blog/2013/03/26/haslayout/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>IE/Win的表现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。haslayout 是WindowsInternet Explorer渲染引擎的一个内部组成部分。
在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的hasLayout 属性值为true时，我们说这个元素有一个布局（layout）。
如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性一旦被触发，就不可逆转。（除非移除或者重置触发元素halayout的某个属性）通过 IE Developer Toolbar可以查看 IE 下 HTML 元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为”haslayout = -1”。
下列元素应该是默认具有 layout 的：</p>
<pre><code>* <html>, <body>
* <table>, <tr>, <th>, <td>
* <img>
* <hr>
* <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
* <iframe>, <embed>, <object>, <applet>
* <marquee>
</code></pre>
<p>具有”layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在IE/Win中内联元素可以包含块级元素而少出问题，因为在别的浏览器中display:inline 就是内联，不像 IE/Win一旦内联元素拥有 layout 还会变成 inline-block。当网页在IE中有异常表现时，可以尝试激发 haslayout来看看是不是问题所在。常用的方法是给某元素 css 设定zoom:1 。使用 zoom:1是因为大多数情况下，它能在不影响现有环境的条件下激发元素的haslayout。而一旦问题消失，那基本上就可以判断是 haslayout的原因。然后就可以通过设定相应的css属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。</p>
<p>对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;)。</p>
<p>haslayout 问题引起的常见bug：</p>
<pre><code>IE6及更低版本的双空白边浮动bug 修复: display:inline
IE5-6/win的3像素偏移bug 修复: _height:1%
IE6的躲躲猫(peek-a-boo)bug 修复: _height:1%
</code></pre>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/03/26/comment-test/">Comment Test</a></h1>
<p class="meta">
<time datetime="2013-03-26T14:35:00+08:00" pubdate data-updated="true">Mar 26<span>th</span>, 2013</time>
| <a href="/blog/2013/03/26/comment-test/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>testing!</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/03/25/first-blog-in-pages/">First Blog in Pages</a></h1>
<p class="meta">
<time datetime="2013-03-25T22:40:00+08:00" pubdate data-updated="true">Mar 25<span>th</span>, 2013</time>
| <a href="/blog/2013/03/25/first-blog-in-pages/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><div class="content">
3.25晚，github:page初尝试。打算用做技术博客。以上。
—-seventh
</div>
</div>
</article>
<div class="pagination">
<a href="/blog/archives">Blog Archives</a>
</div>
</div>
<aside class="sidebar">
<section>
<h1>最近的文章</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/2013/04/17/4-dot-17/">语义化你的标签</a>
</li>
<li class="post">
<a href="/blog/2013/03/30/3-dot-30/">HTML结构</a>
</li>
<li class="post">
<a href="/blog/2013/03/26/haslayout/">haslayout</a>
</li>
<li class="post">
<a href="/blog/2013/03/26/comment-test/">comment test</a>
</li>
<li class="post">
<a href="/blog/2013/03/25/first-blog-in-pages/">first blog in pages</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2013 - seventh.zhao -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'seventhzhao';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
</body>
</html>