新窗口打开下图

Download HTML 5 Visual Cheat Sheet

命中注定总有一个浏览器作为复仇女神来到世界各地的开发者中，在web标准运动初期，这个角色是Netscape Navigator 4，垂死挣扎就是不肯死去，阻碍着现代标准的进程；今天这个角色被Internet Explorer 6这位邪恶的坏同学代替了。——Jeremy Keith

盒模型（The Box Model）

我这里把盒模型真正给丫立体化（特殊到正方体了怎么样）：

有一个正方体宝贝比如是传说中象征永恒的水晶，为了保护它需要一个精美的盒子。为了防止碰撞，在盒子和水晶之间预留了空间来放海绵。在盒子外面再加一层泡沫塑料，也是为了防止水晶磕磕碰碰。我们现在把这宝贝一边的宽度定位width:60px(可以假想为60cm)，盒子里面的海绵厚度padding:15px（也就是说海绵厚度为15cm），盒子的皮厚border:5px（包装够结实——5cm厚），那需要的盒子边长就是60+2*15+2*5=100px（盒子的边长是100cm），水晶盒子外面的泡沫塑料是margin:10px（外面再包10cm厚的泡沫，结实！盒模型的问题和它无关，先把他撕下来扔掉好了-__-）

对于标准的盒模型来说：他们的盒子是看到的实际的盒子，是包含了海绵和水晶的盒子。但是早期的IE看到的只是字面意思上的width。

解决方案：

在HTML页面里面加入完整的<!DOCTYPE>，IE6会切换到近似乎标准的模式，这样IE6就会正确的解释盒模型。如果你不这样做，也可以在定义了width的元素里面不用padding和border，在被封闭的元素里面随意的运用。

我一般解决这个问题的方法是，不在boxes里面用只在layout用.如果box里面有文字在

标签里，我会在p元素直接用padding，跳过这个问题，但是这是可行的。——css-tricks

双边距问题（Double-Margin）

几乎所有的有些经验但经验不足的同学都遇到过这个悲剧的现象，浮动div嵌套着用的不亦乐乎，margin-padding此起彼伏。定了个div想和外部的div保持距离，就在里面的div来个margin，这时候就产生了传说中丑名远播的双边距问题：

未修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
}

修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
      display:inline;/*hi,-___-kill the double margin bug*/
}

在做BI十周年的时候我在父元素用了padding，在IE6标准模式下这样做也是一种办法。

最小/大宽/高（min-width/max-width and min-height/max-height）

IE6不能解释最小最大宽高，其实我觉得这用的不太多。对图片在站点中的重要问题有很多不知道，以后会慢慢学习。很多时候缩略图都是生成的图片，大幅图片直接缩小感觉会比较糟糕。

但是IE6会像标准浏览器解释min-width（min-height）一样解释width（height），所以可以利用IE6不能识别的!important或者其他IE6不能识别的高级选择符来hack：

#selector{
min-width:100px;
width:auto !important;/*IE6区分无法识别*/
width:100;
}

#selector{
min-width:100px;
width:100;
}
html>body #slector{/*IE6区分无法识别-IE7?*/
height:auto;
}

因为IE6把width/height处理了min-width/min-height，所以max-width/max-height没办法这样做了，所幸IE有自己的私有属性expressions，但是这个东西严重影响浏览器性能，但是还是摘来看看：

/*写给 IE6 的max-width*/
* html div.max-width {
  width: expression(document.body.clientWidth > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-width*/
div.max-width {
  max-width: 500px;
}

max-width

/*写给 IE6 的max-height*/
* html div.max-height {
  height: expression(this.scrollHeight > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-height*/
div.max-height {
  max-height: 500px;
}

max-height

高级选择符可参考之前的一些文章

• CSS选择符之一属性选择符
• CSS选择符之二子对象选择符

清除浮动

首先我们来看看什么时候会遇到这个问题，来看初始的html结构和css（下面的测试将会在Firefox3.5以及IETester中的IE6和win系统版IE8/IE7兼容模式进行）：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
width:350px;/*添加不添加这个宽度呢，先填上*/
padding:10px;/*添加这个是为了边框和内容有点点距离*/
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

column-left
column-right

此时的显示无差异，均如下图所示：

不清楚浮动是怎么样的情况：

这个样子显然不是设计所需要的，两栏布局应该是一左一右并排才是。这时候不得不添加float:left;。在添加浮动我想多做一下测试，到底会有什么不同？单在左栏添加、单在右栏添加、两栏同时添加。

先看单在左栏添加的状况，此时左栏样式添加了float:left：

.column-left{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这时候IE6显示如下：

IE7显示如下：

IE8和FF3.5显示和相同，如下：

可以看出IE67那抽风的样子，完全不可理喻，其他结论先不提。
下面再测试单在右栏添加float:left;：

.column-right{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这次IE6显示如下：

（这里插播一则国际新闻：这个刚才为什么为什么这个和下面的不一样，包括刚才那个，其实呢，这个也是前文提到的双边距bug，这里只要在column-right加上display:inline;就可以解决了）
IE7显示：

IE8和FF3.5显示相同（实际上文字的字母的距离以及IE文字毛茸茸的样子是因为IE对字体进行了特殊的处理），如下

下面将测试左右栏都添加float:left;的情况：

IE6/7显示相同为：

IE8/FF显示为：

———————-休息一下，来个分割线———————-

有同学好奇的发现：在没有添加任何清除浮动的情况下，IE6/7显示的是正确的！只有FF3.5/IE8才有问题！这是因为另外一个应该被人知道的微软私有属性hasLayout搞的鬼。这里简单的介绍下：IE67支持这个东西，这个属性会被一些诸如width:*px的属性激活，激活这个东西IE会突然听话很多，更多介绍先推荐一篇翻译文章[译文]On having layout，其他的请看参考文章。这个属性到IE8就不支持了，所以上边最后的测试显示IE8,FF得到了我们预料的悲剧。我开始为了截图方便在.wrap添加了width:350px的属性。

下面再来看看没有这个width:350px的时候，左右都不添加浮动的情况，样式如下：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
/*此处去掉width:350px*/
padding:10px;
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

浏览器均显示为：

此时右栏在IE6并没有出现双边距问题，因为它不是浮动元素，其他单栏测试省略。
再来测试双栏添加float:left;wrap不设宽度，浏览器均如下所示：

再来测试双栏添加float:left;不设wrap宽度不设wrap内边距：（这样对比下，更直观）

说了这么多，自己越来越清晰，但不知道这样能不能讲明白，但是测试浮动会出很多状况。所以，传说浮动会产生一堆变态问题，那绝对是个事实！这个时候就会遇到怎么处理这些浮动的问题了。

解决方案——怎么清除浮动：

清除之后如图所示：

附加标签

W3C推荐的方法就是这个方法，这个方法在浮动元素末尾添加一个空标签：

或者div之类的也可以

这样添加额外的结构，如果不介意有些多余的结构也不会有任何问题。

clearfix

将下面代码写入css，在包含content的div加入clearfix：

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

像下面这样

column-left
column-right

参考文章

• 10 Fixes That Solve IE6 Problems
• Solving 5 Common CSS Headaches
• 9 Most Common IE Bugs and How to Fix Them
• Definitive Guide to Taming the IE6 Beast
• Min-Height Fast Hack
• Lessons Learned Concerning the Clearfix CSS Hack
• Clearing a float container without source markup

我们在实际开发过程中是怎么做的呢？在开发网站中我们怎样做到即利用最新的编码技术又可以保证Internet Explorer的用户的正常访问呢？

在这篇文章中，我们将见到既可以保证IE用户良好的用户体验又可以保证技术前进的措施。我们将集中在CSS部分，但是会提供一些处理其他问题（overall markup）的小技巧。

可以斟酌我们之前的文字：

• Taming Advanced CSS Selectors
• Take Your Design To The Next Level With CSS3
• Push Your Web Design Into The Future With CSS3
  

内容最重要

杰弗里-泽尔德曼（Jeffrey Zeldman，Web 标准项目小组的负责人）曾经说，“内容要先于设计。缺少内容的设计不是设计，是装饰。” 事实上，在我们网站上最重要的是内容。无论他们使用什么样的浏览器，这才是他们需要得到的东西。

使用CSS3不是要忽略过时的浏览器，把访客拒之门外 。我们应该在老浏览器甚至是IE5、IE5.5里面测试我们的网站，保证每个用户可以看到内容。

这也不是说我们要退出消灭IE6的战争。我们仍然可以学习以下网站的例子，比如Twitter和YouTube，添加一个平易近人（dd visible but not dead-end）的升级提示。

Twitter和Youtobe的给IE6用户的提示信息

记住：每个专业人员有责任教育那些对他们专业不熟悉的人。我们应该解释这些原理给我们的客户，但不能颐指气使地说教。毕竟他们的工作不是搞清楚这些事。

首先是最基本的：“三层”分立（HTML, CSS 和 JavaScript）

当我们一步一步建立一个新站点的时候。首先，是HTML。我们将尽可能使用语义化的标签来标记我们的内容：标题应该用heading，列表用list，等等。内容完美的可读性和仅仅完成这部分代码就拥有可理解的结构是最低限度。内容应该有理有据，我们必须时刻记得这“层”（HTML）是我们开发其他剩余项目的基石。

其次，我们添加CSS样式。这一步，我们为站点添加视觉元素，使站点个性化。同时我们应该保证在没有第三层（JavaScript）的时候，内容的可读性。

最后，第三层JavaScript，行为层。这里我们给站点加入交互元素。用像tabs、sliders、lightboxes等工具丰富站点的体验。

将这些过程铭记心中，任何浏览器都可以访问我们的内容。保证过时的浏览器只得到基本的内容，而忽略那些妨碍用户浏览的复杂代码。

为老浏览器添加基本样式

这样我们语义化标记做完了。我们知道一些浏览器不能正确渲染CSS或者根本不能渲染，像那些Netscape 4.o或者Internet Explorer 4.0之前的浏览器，显示裸内容——无样式版——是最佳的选择。

一些同学认为时至今日没有必要这样做。但是如果你想确保那些使用老浏览器的同学不会陷入困境，那么用link 链接基本版本的CSS，然后用@import链接更高级CSS文件吧，如下：

也可以跳过link全部标签，留给老浏览器一个只有文字的网站版本：

拥抱差异

现在让我们来处理这个常用浏览器中的害群之马：Internet Explorer 6。
你有两个选择：

1.如果在你站点的访客中只有很少比例的人在用它（IE6），你只需要为IE6建立一个基本的样式。

2.接受你的设计在IE6中将得到不一致的表现，并且决定该舍弃什么：哪些IE6问题需要纠正那些该放弃。

如果你选择提供给IE6一个基本的样式，最好的办法是利用Universal IE6 CSS。实际上你的网站没有设计，但是这个样式表确保网页有个可读的宽度，合理的标题大小，并且内容也有一些适当的留白。

在HTML文档里，应该添加一些条件注释到样式链接上，为IE6屏蔽其他样式文件：

在第一个注释里面，为除IE66以外的浏览器引入了主要的样式文件（因为这个“!”）。在第二个注释里面我们直接从Google文件库引入Universal IE6样式表（还可以节约带宽！作为译者的我忍不住：囧一个）。

Make Photoshop Faster 这个网站就为IE6使用了Universal style sheet

如果你更看好第二路线，你必须做好面对浏览器渲染不一致的心理准备。知道在IE6、甚至IE7和IE8，一些设计的细节将看不到或者不能被完美的渲染。别因为这个悲剧感到不爽哦。

目录

• 在IE主流时代诗意地编码（一）
• 在IE主流时代诗意地编码（二）
• 在IE主流时代诗意地编码（三）
• 在IE主流时代诗意地编码（四）
• 本文译自 Smashing Magazin [ 英文原文 ]

折腾了个Tab.折腾一晚上- -,又改样式玩,最后又加了Ghibli V1.0…-.,-!  以下-源：

shiningghibli.css
shiningghibli.js

ShiningGhibli -Tab(Demo)

概述：

Lightbox是一个个简单实用的脚本，用来将图片覆盖于当前页面之上。
在所有主流浏览器中安装并使用它是一件相当便捷的事情。

更新 V2.0

相片集：相关图片，快捷导航。
特效：奇妙的过渡性。
向后兼容：可以！

使用方法：

第一步：安装
1. lightbox2使用了Prototype框架和Scriptaculous特效库。将下面Js文件引用到header里面（按照下面的顺序）。

<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>

2. 引用Lightbox 样式文件（或者将Lightbox的样式添加到你的样式文件中）。

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />

3. 检查样式文件，确认调用的图标文件prev.gif和next.gif在正确的路径。
同样要确认在lightbox.js文件头部附近调用的图标文件Loading.gif和close.gif在正确的路径。

第二部：激活
1. 给任何一个链接标签添加一个 rel=”lightbox”属性就可以激活lightbox。比如：

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

另外：可以用title属性添加相片的描述。
2. 如果你想给一组相关相片建立相片集的话，在第一步的基础上用中括号给rel属性添加相片集的名称。

<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>

3. 每一页的相片集数和每一相片集的相片数都是任意的。够屌吧！

帮助：

出错了，图片在新页面打开了，这么回事儿啊？
这个问题一般是由于脚本冲突。检查你的body标签，看下那个onload属性。比如：

<body onload=”MM_preloadImages(‘/images/menu_on.gif’)…;”>

最快捷的解决办法是像这样给onload属性加一个lnitLightbox()：

<body onload=”MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()”>

页面没加载完的时候点击无效呀。
脚本只有在加载完了才会运行呢。

覆盖的阴影没有覆盖整个浏览器窗口。
去掉浏览器默认margin和padding属性，在样式表里加上

body{ margin: 0; padding: 0; }

可以在描述里面加入链接不?
可以的，只是你需要把引号、大于、小于等符号 转换成各自的html实体符号。比如：

<a href=”images/image-4.jpg” rel=”lightbox” title=”&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;”>Image</a>

（译者：<a href=”images/image-4.jpg” rel=”lightbox” title=”<a href=”link.html”>my link</a>”>Image</a>——这个是没转义的，当然是让你看到需要改那个link.html的，这样写只是为了方便看，使用的时候需要转义，只能用上面的。）

可以用这个代码显示动画，视频或者其他内容不?
不好意思，只能显示相片。显示其他内容，用google搜索下Lightbox modifications或者试试其他的脚本，像Cody Lindley的 ThickBox.。

这个脚本可以用框架调用不？
如果想用框架，试试Lytebox modification，会有更好的表现。

能不能用于商业项目类？
能，使用许可参照Creative Commons Attribution 2.5 License.。能捐个一子儿半子儿就更好啦，暗示暗示。
出于适当的考虑，唯一的要求是在js文件头部留下我的名字跟链接。做个html链接我会感激的，不过不是必须的。

下载：Download

http://www.open-open.com/ajax/Lightbox.htm

test

test2

东西一模一样，可是第一个就不认识bg定位.呃.

强制 Internet Explorer 8 像 Internet Explorer 7 一样呈现网页：

以网站为基础

网站所有者和管理员可以包含以下自定义 HTTP 头强制 Internet Explorer 8 像 Internet Explorer 7 一样呈现网页：

要在基于 Windows Server 2008 的计算机上的 Internet Information Services 7 中的网站级别添加自定义 HTTP 响应头，请按照以下步骤操作：

1.

单击“开始”，单击“管理工具”，然后单击

“Internet Information Services (IIS) 管理器”。

2.

在“连接”下，双击需要的服务器，然后双击“站点”。

3.

单击要添加自定义 HTTP 响应头的网站。

4.

在“Web site name 主页”下，双击 IIS 部分中的“HTTP 响应头”。

 注意：在此步骤中，Web site name 是网站的名称。

5.

在“操作”下，单击“添加”。

6.

在“名称”框中键入 X-UA-Compatible。

7.

在“值”框中，键入 IE=EmulateIE7。

8.

单击“确定”。

要在 Internet Information Services 6 和早期版本的网站级别添加自定义 HTTP 响应头，请按照以下步骤操作：

1.

依次单击“开始”、“运行”键入 inetmgr.exe然后单击“确定”。

2.

展开所需服务器，然后展开“网站”。

3.

右键单击所需的网站，然后单击“属性”。

4.

在“自定义 HTTP”下，单击“添加”。

5.

在“自定义头名称”框中，键入 X-UA-Compatible。

6.

在“自定义头值”框中，键入 IE=EmulateIE7。

7.

单击“确定”两次。

以网页为基础

网站所有这和管理员可以在网页的 <Head> 标记后包含以下特殊 HTML 标记：

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

HTML允许省略某些结束标记，而XHTML要求每个元素（包括空元素）都有结束标记。为了尽可能保持与浏览器的兼容性，在空元素中加一个空格和一个斜杠，如：

<p>© 2008 5ivedance.com

在HTML中，某些元素（如P）不要求要结束标记。后续p标记隐式地结束前面的p标记。

<p>© 2008 5ivedance.com</p>

在XHTML中，所有元素必须有结束标记。

<img src=ivedance.jpg alt=”ID: milo xing” width=30 height=50>

在HTML中，空元素没有最后的斜杠，即使有也不会报错。

<img src=“ivedance.jpg” alt=”ID: milo xing” width=“30” height=“50” />

在XHTML中，即使是空元素，也必须有结束标记。为空元素编写的独立的结束标记（比如</img>）在技术上是正确的，但是在img标记中添加一个空格和/可以确保与不理解XHTML的浏览器的兼容性。同时，大家注意到上面两行代码的其他不同的地方了吧，在HTML中，只有在属性值包含空格或其他特殊符号（除了字母，数字，连字符，句点，下划线和冒号之外的其他字符）时，才需要加引号。所以上面的例子第一个行，只有alt的属性必须加引号（给其他加也没什么坏处）。在XHTML中，所有的属性必须都加上引号，如第二行。

另外，在HTML中，以大写或小写字母编写元素名、属性名或预定义值是无所谓的，但是在XHTML中，所有的元素名、属性名和预定义值都必须是小写字母。

在HTML中，某些属性，比如<hr width=75% noshade>中的noshade可以没值，但在XHTML中，必须显示声明属性值。对于没有值的属性，只需将属性名做属性值，如<hr width=”75%” noshade=”noshade” />

XHTML真的好无语，为什么搞这么多规则折磨人呢？也许严谨性，利于修改，后续工作轻松，CSS格式化方便，数据库转换什么的，你说你都不太在乎，不过XHTML是从HTML转换到XML的一个罗杰步骤，XHTML做为一个新标准，我们在期待其他新技术以及未来新技术可以支持它。