故地重游，物是人非，清雨依旧，随风莫回。曾经双双倚阑凭眺海，而今劳燕单飞不逢颜。传道是痴男恨女多忧怨，实却为不谙世事妄自闲。妄自闲，不识缘，待到追忆又经年。合心还一愿，有情在人间。

一些网站（尤其是娱乐性为主的网站）从用户视觉体验角度出发，会将用户头像设置为圆角显示，以增加亲和度。如开心网的用户头像：

在此基础上，追求更简约的设计会直接将头像图片本身设置为圆角来展示，如腾讯朋友：

这个效果看似简单，但可能会令一些前端er感到头疼。毕竟在尚不支持CSS3圆角属性的IE大行其道的当下，高效的解决页面中的批量圆角图片不是那么容易。看到最后的童鞋也会发现，本文也无最优解，因为不同的环境，需求不同，技术实现也会不同。

技术实现

后端生成

似乎对于前端来说，最希望的就是后端工程师在程序开发上能支持用户上传头像时候，可以自动生成一组用于前台页面不同情境下使用的头像集合，既包含了默认直角的同时也会生成圆角版本的调用头像。

优点：节省前台页面对圆角图片处理的代码量，为公司省带宽，为用户省加载时间。

不足：后端开发成本提升，服务器负荷在生成头像阶段有极为微小的加剧。

前端实现

目前看来。似乎绝大部分的网站会采用由前端来实现这个效果。毕竟，前端负责的就是用户浏览器里的那些东西。

我们这里不会谈论那个07年广泛使用的“4个<b>绝对定位”的方式，毕竟对于但页面中数量众多的用户头像来说，这个方法虽可行但效率太差，同时也是表格布局思维的遗老——以视觉为基础进行布局的意识要不得。

方法一：针对非IE的更现代款浏览器，采用CSS3

相信大家都会最喜欢这个方式，简单高效，代码无冗余可以保持优雅，只是目前鉴于黑势力的IE系列，若想普及还有待时日。DEMO请猛击这里。

HTML：

<div id="demo-2">
  <a href="http://www.osmn00.com">
      <img src="images/hi.jpeg" width="60" height="60" />
  </a>
</div>

CSS：

img {
	border:0;
	display:block;
}
#demo-2 img {
	border-radius: 4px;
}

方法二：针对不那么现代的IE系列，采用额外的一个绝对定位层

这个方法首先需要一张png图片为覆盖图，该覆盖图中间为透明，只在四角有不透明部分。设置图片外容器为相对定位，此覆盖层为绝对定位。当此覆盖图覆盖在头像上时，头像就因四角被覆盖，呈现出圆角的外观。DEMO请猛击这里。 

HTML：

<div id="demo-3">
  <a href="http://www.osmn00.com">
    <span></span>
    <img src="images/hi.jpeg" width="60" height="60" />
  </a>
</div>

基本的CSS：

img {
	border:0;
	display:block;
}
#demo-3 a{
	width: 60px;
	height: 60px;
	display: block;
	overflow: hidden;
	position: relative;
}
#demo-3 a span {
	width: 60px;
	height: 60px;
	display: block;
	background: url(images/portrait_round.png);
	position: absolute;
	left: 0;
	top: 0;
}

因为要使用带过渡透明的PNG图片，所以此方法会遇到IE6不支持PNG的问题。解决的办法有很多，详细的说明请移步这篇文章：《IE6下png背景不透明问题的综合拓展》。本demo中采用IE6背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。再或者可以狠狠心，针对IE6就不提供圆角的样式，而是默认的直角头像，如腾讯朋友，在IEtester模拟的IE6环境下就是直角的。

本DEMO中针对IE6改进后的部分CSS：

#demo-3 a span {
	width: 60px;
	height: 60px;
	display: block;
	cursor:pointer;
	background: url(images/portrait_round.png)!important;
	background: url(images/portrait_round.gif);
	position: absolute;
	left: 0;
	top: 0;
}

针对IE6增加了2条语句，一个是光标在头像上时变为手型（显示为可点击区域），一个是背景设置为GIF格式图片。本demo中采用IE6背景图更换为gif格式，虽然有一点点锯齿但总比加载一个巨大的JS文件强。两者截图对比：

改进

上述方法看上去还不错，但每次都要在结构中显式地添加一个额外的标签总是没有什么爱。不单单是有损于结构代码的优雅，更是增加了页面的体积、无助于服务器效能提升和带宽的节省，同时增大的网页体积也不利于用户在客户端更快的加载网页。

那就考虑什么办法能在满足结构代码精简优雅的同时又能实现我们想要的头像圆角？是的，用JS在客户端动态的生成额外的圆角层标签。改进后的DEMO请猛击这里。

结构代码中没有了无语义的span，同时增加了如下的JS代码：

function createFilletedCorner(){
	var getElementsByClassName = function(searchClass,node,tag){
		var classElements = new Array();
		
		if (node == null)
			node = document;
			
		if (tag == null)
			tag = '*';
			
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
		
		for (i=0,j=0;i<elsLen;i++){
			if (pattern.test(els[i].className)){
				classElements[j] = els[i];
				j++;
			}
		}
		return classElements;
	} 

	var parents = getElementsByClassName('avatar');
	
	for (var i=0;i<parents.length;i++){
		var x = document.createElement('span');
		var avatar = parents[i].getElementsByTagName('img')[0];
		avatar.parentNode.insertBefore(x,avatar);
	}
}

window.onload = function(){createFilletedCorner()} 

新版本的Firefox、Chrome等早已支持“getElementsByClassName” 方法，但黑势力的IE系列尚未支持。作为这个仅针对IE系列的头像圆角效果实现方法，我这里加入了实现按CLASS选择对象的方法。

效率至上

目前，代码里没有了冗余的无语意的span标签，而是采用JS在客户端网页载入完毕后动态的生成这一系列的标签。那么接下来的问题就是，这2种方式哪一种会更有效率？最佳方式就是在大数据的情况下实际测试一凡，同时，大数据量也会将性能差距放大以便更好的观察。

这里将无JS的和有JS的各来一份，内容以组为单位，每组由20个不同的头像组成，共50组1000条头像列表。

无JS的版本，有JS的版本

同等测试环境下，20+次的测试，HttpWatch显示JS动态生成的版本比非JS生成的版本在加载时间上快0.3秒左右；观察到系统内存占用JS版比非JS版多出4M。

而现实中绝少会碰到一个页面存在1000个圆角头像的情况，一般一个页面存在100个左右的头像就已经很多了。而在每页100条的情况下，2者在内存占用上差别甚小。

进而取舍的关键点之一便成了在具体情况中，哪一种方法最能节省页面体积。JS版本中需要用到“getElementsByClassName” 方法，在无附加引用类库的情况下，多些的JS语句增加的体积似乎并不比删除的额外标签来得少。但要是在网页中附加了其他的类库如JQ等已经内置实现“getElementsByClassName” 方法，则采用JS的方式的确会节省很多的体积，同时也最大程度上保证了局部代码的优雅。

总结：

头像圆角的实现，似乎不单单是一种技术的方式，而是可以针对不同浏览器采用不同的方式，是渐进增强还是优雅降级，取决于你的用户、或者是你的经理。这里仅仅是给出我自己的一种办法：

• 针对支持CSS3的现代浏览器，采用CSS3的圆角方式
• 针对IE系列，采用额外的标签
• 不同的情景选用是否采用JS来生成额外的标签

如有不同意见或补充，欢迎回复讨论~！

延伸阅读，更多的圆角实现技术：http://www.smileycat.com/miaow/archives/000044.php

都鸟兽如云散了。
回家了，
梦碎了，梦醒了，
又开始寻梦了。
兄弟，我想你了。

那时候，
一起上下学，
一起吃饭，
一起逃课，
一起做梦，
兄弟，我想你了。

第一次暗恋的女生只告诉了你，
记得你无言的安慰，
记得你帮我点上烟并说：
“算个啥啊！”
兄弟，我想你了。

没钱的时候总向你借，
还钱的日子遥遥无期，
你却从不催债。
兄弟，我想你了。

那时候不知道自己的未来，
那时候不知道什么是真正的生活，
那时候，我能天天见到你。
兄弟，我想你了。

记得我们一起创业，
记得你汗湿的脊梁，
记得你那天的眼泪。
兄弟，我想你了。

总是抱怨你的电话打的太晚，
总是批评你太孩子气，
总是说你拿得起放不下。
兄弟，我想你了。

你爱玩魔兽，
我喜欢实况，
怀念寝室中面对面各自敲打各自的键盘，
不用抬头，知道你就在那里。
兄弟，我想你了。

06年，大一时期就是室友，只有我们。
现在你工作了，
我在为休学还债，
一样的不后悔，
一样的有志气。
兄弟，我想你了。

无数次凌晨2点不睡觉，依然在讨论，
静的夜，
不安静的思想。
兄弟，我想你了。

折叠电脑桌，
冰啤酒，12点以后才到的黑背心烧烤，
啤酒里加白酒，喝不下去了就加点糖。
兄弟，我想你了。

一次次和你打赌，
一次次的赢。
看着你的苦笑，我笑不出来，
只是想你少走我的弯路。
兄弟，我想你了。

在你面前从不掩饰，
有好东西从不自己藏着，
你也一样。
兄弟，我想你了。

大一的青色，
大四的苦涩，
离别了，
独自寻梦了。
兄弟，我想你了。

离校那天，
就像平时，离开了寝室，奔向教室。
从没想过真的散开。
兄弟，我想你了。

兄弟，不管多难，
多孤单，
不要放下追求梦想的心！
兄弟，我想你了。

兄弟，我想你了！

原版，点击可查看大图：

堂主译文地址：http://www.osmn00.com/translation/232.html

转载请原作者及译者劳动，附带以上信息，谢谢合作~

翻译此文的目的一是回顾并梳理基础知识；二是为初学者提供一份学习文档，遥记得06年下半年刚接触CSS的时候，正经的一篇汉语版基础技术文章都很难找到，更别说书了；三是浮动的相关知识也是后续自己酝酿的一篇博文将会涉及到的知识点，所以翻译此文也是为了避免届时的新博文出现无引用文章的尴尬。

-------------------- 分割线，以下是正文 --------------------

对于所有使用HTML和CSS的设计师、开发者而言，浮动都是一款利器。不爽的是，如果对于它的工作原理不能完好理解把握的话也会导致很多烦人的问题。在过去，因为浮动经常和一些浏览器兼容性的BUG扯上关系，所以大家在应用浮动的时候都会很紧张。现在请大家都稍微放松，我会告诉你究竟浮动是如何对元素工作的，并且你会知道一旦你掌握了浮动，它会为你提供多么强大的帮助。

纸质印刷中我们随处可浮动的存在，随手拿起一张报纸，几乎都可以看到有文字围绕着图片的情况。在HTML/CSS的世界里，文字会像杂志里那样围绕在一个被设置了浮动的图片周围。图片只是我们许许多多用例中的一个，我们还可以用浮动制作一个流行的两栏布局。实际上你可以在页面里对任何元素应用浮动。学习浮动的同时配套阅读下面这篇文章：《CSS 定位》英文版、中文版，你会对任何布局技术都自信满满。相关CSS定位技术的文章，还可配套阅读堂主之前翻译的《全透视：CSS z-index 属性》一文。

定义

学习浮动，从定义开始。我们遵循W3C的定义：

浮动是指一个BOX在当前行向左或向右移动。浮动最有趣的特性是内容会围绕在它的旁边。对于一个左浮动的box来说内容会围绕在它的右边，相反则会围绕在左边。

对于浮动属性我们可以设置4个属性值：left、right、inherit以及none，每一个属性值名称本身就有非常好的解释性。举个例子，如果你对一个元素定义一个float:left;，它就会移动到其父容器最左边的边界处，同样设置float:right;会移动到其父容器最右边的边界。inherit值使得元素继承其父容器的浮动值。none是元素默认情况下的值，意味着不做任何浮动。

这里有一个类似于杂志里效果的例子1，使用了如下的标记：

img {
     float: right;
     margin: 10px;
} 

浮动是如何表现的

上面的代码虽简单却高效，你会说：“切！小孩都会”。好吧，在我们深入浮动的世界之前，先花几秒钟来回视一下这里究竟发生了什么。在网络的世界里，HTML是被一些规则约束的，特别是文档流（Normal Flow，国人常译为“文档流”，其实译作“常规流”更贴合其原意。扫盲贴详见这里。从习惯角度考虑，本文将延续“文档流”的译法。关于文档流的另一篇汉语文章详见这里）。在文档流中，块级元素（div、p、h1等）在窗口范围内沿着垂直方向首尾相接自上而下的排列。浮动元素首先按照文档流的方式排列，之后脱离文档流而按照浮动设置的方向尽可能的贴近父容器的左、右边界。换句话说，浮动的元素不再首尾相接而是在父容器给予的空间内排排而坐。对于开发网站的你，一定要记住浮动的这个重要特性。

多看几个实例。在例子2中，有三个没设置浮动的box：

.block { 
  width: 200px;
  height: 200px;
}

注意看它们是如何首尾相接的，这就是文档流的基本概念。还是这个例子，只不过这次我们给box添加了浮动。例子3

.block { 
  float: left;
  width: 200px;
  height: 200px;
}

现在box们排排坐了。好的，“排排坐”是什么意思这回是明白了，但上面提到的“在父容器给予的空间内排排而坐”又是怎么回事呢？沿用上面最后一个例子，这次把里面已有的box组复制5份，它们的父元素是文档中的body元素。注意在目前浏览器窗口尺寸情况下，浮动的box出现了换行。这是因为其父容器的空间不足以在一行内容纳下所有的子辈元素。当你调整浏览器窗口尺寸时，你会发现浮动的box们会自动的跟随调整排列。你自己来尝试一下例子4。

使用clear

浮动有一个干兄弟，就是clear属性，这2个属性在某种程度上的互补能令你的堆码过程变得愉悦。你可能还记得，浮动元素首先按照文档流布局，之后脱离文档流。这意味凡是出现在浮动元素之后的那个元素在布局上的行为都会和你预期的不一致。这就是我认为的初学者会陷入浮动带来的麻烦的开始之处。来看看例子5，粉色和蓝色box是浮动的，绿色和橙色box是未浮动的。

<div class="block pink float"></div>  
<div class="block blue float"></div>  
<div class="block green"></div>  
<div class="block orange"></div>    

.block {
    width: 200px;    
    height: 200px;  
}  
.float { float: left; }  
.pink { background: #ee3e64; }  
.blue { background: #44accf; }  
.green { background: #b7d84b; }  
.orange { background: #E2A741; }    

你认为绿色的box会怎么样？哦，等一下，它在哪？原来是在粉色的box下面，它被粉色的box覆盖住了（堂主注：因为宽度值触发了layout的缘故，所以如果你是用IE6/IE7浏览例子5的话，你会发现绿色的并未被粉色的覆盖，而是水平方向上位于蓝色box的右侧）。粉色和蓝色的box因为被设置了浮动而按照我们的意愿排列。但因为它们脱离了文档流，所以绿色和橙色的box会视它们不存在一般排列。这就是为什么我们的绿色box会被遮盖在粉色的box下面。那么我们如何能使绿色的box重见天日呢？使用clear。

clear有5个属性值可用：left、right、both、inherit以及none。设置clear:left意味着这个元素的上边界必须位于一个被设置了float: left的元素之下。clear:right和clear:both也是以此类推。inherit值使得元素继承其父容器的clear值。none是不设置clear，是元素的默认值。

下面来看例子6，这次我们应用了clear：

<div class="block pink float"></div>  
<div class="block blue float"></div>  
<div class="block green clear"></div>  
<div class="block orange"></div>    

.block {
    width: 200px;    
    height: 200px;  
}    
.float { float: left; }  
.clear { clear: left; }  
.pink { background: #ee3e64; }  
.blue { background: #44accf; }  
.green { background: #b7d84b; }  
.orange { background: #E2A741; }    

这就等于是告诉了绿色的box，虽然粉色的box目前是脱离了文档流，但依然要将其看作是处于文档流中般的处理，要首尾相接的排在它的下面。这是一个无比强大的属性，你能看到，它帮助了我们未浮动的元素在文档流中正常地显示。正确的理解float和clear会为你的前端之路增添许多色彩。

堂主这里插一句，在《写给大家看的CSS书》（第2版）中，作者及译者对clear属性进行了一番这样的描述：读者可以将clear属性理解为通过设置清除元素上外边距来填满（或补足）浮动元素旁边的空间，以便清除元素从浮动元素的下方开始布局。事实上，clear属性的原理，就是清除元素的上外边距能够能够被自动地重写并设置，从而使该元素只有可见部分会显示在浮动元素下方。因此，如果我们为清除元素设置了上外边距也将被clear声明撤销。（P112页底部）

基于浮动的布局

现在来谈谈布局，这是浮动异常有用之所在。我们可以用很多方法实现传统的两栏布局，这些方法中的大部分都应用到了1至2个浮动的元素。来看一个很简单的例子，一个传统的2栏布局，左侧是包含主体内容的区域，右侧是包含导航的边栏，另外上面有一个页顶，下面有一个页脚。例子7

#container {
  width: 960px;
  margin: 0 auto;
}

#content {
  float: left;
  width: 660px;
  background: #fff;
}

#navigation {
  float: right;
  width: 300px;
  background: #eee;
}

#footer {
  clear: both;
  background: #aaa;
  padding: 10px;
}

详细说一下，这个例子中父容器被命名为#container，它用来包含浮动的元素并为它们定界，如果没有它，我们的浮动元素就会跑到很远的浏览器窗口边界那。另外设定了#content和#navigation容器，它们都被设置了浮动，一个左浮动一个右浮动来实现2栏布局。我为它们2个设置了宽度来填满父容器。最后为#footer设置了clear:both来清除浮动好令它正常的出现在上面2个浮动元素的下方。

如果我们忘了清除浮动会发生什么呢？来看看例子8就知道了。

此时页脚出现在了边栏导航的下方，这是因为边栏的下面还有空间可以放置页脚，在文档流情况下便出现了这个情况，实际上这种显示是正确的。但这一定不是我们想要的效果。

如果你像我一样有强迫症，你会发现例子7中的2栏不等高。得到等高2栏的方法可以参考Dan Cederholm的《人造2栏》的方法，这不在本文讨论范围之内。

堂主这里再额外的插话了：采用背景图模拟2栏等高是一种不错的方式，但这会导致增加一个额外的背景图片的HTTP请求，延缓页面的加载速度；同时也只有等到背景图被完全加载以后才会在视觉上实现“等高”，而在这之前其实还是不等高的。第二种方法是采用超大的负值下外边距+下内填充的方法来实现，这里有一篇中文的讲的比较详细的文章做参考。这个方法不会增加额外的HTTP请求也无需烦闷的等待那个背景图加载完成再实现视觉等高，可谓优点多多，只需要给父容器加一个overflow:hidden。但不好的地方在于，如果恰巧你的2栏被设置了边框，那你会损失掉下边框。第三种办法是采用display:table-cell的方式将需要等高的容器模拟成表格列，我们知道表格列是默认等高的。只是此属性IE7-不支持。

浮动先行

目前位置我们只是看了几个不会产生头疼问题的简单例子。然而，当你使用浮动属性的时候，那里依然存在着很多陷阱。其中最令人惊讶的陷阱和CSS无关却是关乎HTML代码本身。当你把浮动元素放入HTML中时会导致很多不同的结果，见例子9

这里我们展示了一个小巧的box，它里面有一个右浮动的img同时又有一些文字围绕在img旁边。用到的CSS是很基本的：

#container {
  width: 280px;
  margin: 0 auto;
  padding: 10px;
  background: #aaa;
  border: 1px solid #999;
}

img {
  float: right;
}

HTML代码是：

<div id="container">
    <img src="image.gif" />    
    <p>This is some text contained within a   
    small-ish box. I'm using it as an example  
    of how placing your floated elements in different   
    orders in your HTML can affect your layouts. For  
    example, take a look at this great photo   
    placeholder that should be sitting on the right.</p>  
</div>    

还是这个例子，如果我们稍微重新排列一下某些元素的位置，会发生什么呢？见例子10，我把图片放在了段落文字的后面。

<div id="container">   
    <p>This is some text contained within a   
    small-ish box. I'm using it as an example  
    of how placing your floated elements in different   
    orders in your HTML can affect your layouts. For  
    example, take a look at this great photo   
    placeholder that should be sitting on the right.</p>  
    <img src="image.gif" /> 
</div>    

这回的结果就不是很理想了，我们的图片浮动到了右边，但却没出现在我们希望的右上角，而是出现在了段落文字的下方。更糟糕的是，它似乎是飘出了我们的#container容器。究竟是哪里出了问题？首先，对于布局能够良好的进行我发现了一条规则，就是“浮动先行”。也就是说，在HTML中，应该把浮动元素放在非浮动元素之前。其次，img似乎是飘出了我们#container容器的这种情况被称为“高度塌陷”。下面就来谈谈何谓“高度塌陷”以及如何去解决它。

高度塌陷

高度塌陷是指当容器内包含浮动元素，容器并未像如同这些元素不浮动般的自动扩展延伸。像上面的例子，我们的容器#container似乎是当浮动的img元素不存在般，在自身高度延伸问题上忽略了它，产生了高度塌陷问题。这不是浏览器的BUG，而属于预料中的正确显示。因为浮动元素移出了文档流，所以#container容器在计算自身高度的时候便忽略了它。Eric Meyer在《包含浮动》一文中详细了阐述了这个现象，这是一篇很有用的笔记资料。幸运的是，我们有一大堆的办法可用来补救这种情形。如果你猜测可以使用clear属性来解决它，那我会说你上道了。

常规的解决方案中的一个便是在浮动元素之后放置一个clear元素，因为浮动元素虽然脱离了文档流，但其自身的所占据的空间还在哪里，所以后面放置的这个处于文档流内的clear元素会使父容器在计算自身高度时也把浮动元素的那部分高度也计算进去。实际的例子会更直观，看例子11，它和我们上面的例子是一样的，只是多了一行清除代码：

<div id="container">   
    <p>This is some text contained within a   
    small-ish box. I'm using it as an example  
    of how placing your floated elements in different   
    orders in your HTML can affect your layouts. For  
    example, take a look at this great photo   
    placeholder that should be sitting on the right.</p>  
    <img src="image.gif" />
    <div style="clear: right;"></div>  
</div>    

现在高度塌陷问题解决了，但这并不是优雅的办法，因为这会增加一个无意义的标记。所以，采用纯CSS的方式会优雅很多，现在我们就来接触其中的一种。

考虑下面的这种情况，一个容器内部有三个浮动的图片，结构代码如下：

<div id="container">
    <img src="image.gif" />    
    <img src="image.gif" />    
    <img src="image.gif" />  
</div>    

CSS样式代码如下：

#container {
  width: 260px;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  background: #aaa;
  border: 1px solid #999;
}

img {
  float: left;
  margin: 0 5px 0 0;
}

现在你一看到这种情况，就会意识到容器在计算高度时候不会把里面浮动的图片计算在内。见例子12

现在我们使用CSS的方式而非之前添加额外的HTML标记的方式来处理这个问题。这一次我们用到的技巧是overflow:hidden，请注意overflow属性其本身存在的用意并不是为了应对此种情况，并且应用overflow:hidden来解救高度塌陷还可能会导致诸如内容区被隐藏或者出现无必要的滚动条。你可以从这里的文章1和文章2处知道它是怎么回事和应该注意什么。（堂主注：另外大师级的PPK还在他的个人网站上给出了一个单独的测试讲解页面，点击这里可看。）下面我们采用这个属性来做一下实验：

#container {
  overflow: hidden;
  width: 260px;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  background: #aaa;
  border: 1px solid #999;
}

结果如例子13所示。很酷是吧？另一种麻烦较少的方法是采用CSS伪类选择器:after。还是这个例子，代码是：

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

这里我们在容器的后面创建了一个有一点内容（这里是一个英文句号）的元素，并且通过把高度设置为0的办法把它变为不可见。你可以阅读这篇文章详细来详细了解这个办法。

最后，我们上面提到过的Eric Meyer的《包含浮动》这篇文章介绍了第三种解决高度塌陷的办法，我们这里引用其中关键点一句话：

浮动元素本身可以清除任何因其内部子元素浮动产生的高度塌陷问题。

所以对于我们的例子，把父容器#container本身设置为浮动也能达到上面介绍的几种办法的效果。

上面介绍的几种方法都能完成同样的事情，它们都能使父容器在计算高度的时候把浮动的子元素的高度也计算在内。每一种方法都有其优点，你应该学习这些方法并在你需要的时候视情形选择使用某一种。

因浮动导致的其他问题

除了本文提到的高度塌陷问题之外，因浮动还会导致其他一些会令人烦躁得快速脱发的问题，如“双倍边距问题”和“三像素文本慢移”问题。相信我，任何BUG都很容易解决，只是这不是本文要阐述的问题。

结论

浮动是一项非常有用的布局技术，了解它的工作机制和在规则内是如何表现的会为你良好的利用浮动打下坚实的基础。

相关文章

• 关于浮动的前世今生
• CSS float浮动的深入研究、详解及拓展(一)
• CSS float浮动的深入研究、详解及拓展(二)

设计阶段：

博客模板在配色上借鉴了一个国外的配色网站的模板，具体网址找不到了。当初看到那个网站的界面感觉配色非常好，简洁清淡且功能区划分明确。

这次的模板不同于以往。以往做自己的博客模板都是结构代码随写随寻思样式，基本上是coding+designing并行。而这次是PSD设计图先行，待设计图就位后才开始后续工作。

设计PSD图的时候采用了黄金分割+栅格的技巧，大量运用参考线来找对齐。后续又进行了微调，直至自己感觉满意为止。非设计出身，拍砖请留情啊 : p

点击这里前去115网盘下载设计图PSD文件

编码阶段

这次博客新模版的制作，尝试的选择了HTML5和大部分CSS2.1+小部分CSS3的组合。虽然技术上实现IE6同其他浏览器浏览器体验相同不是困难事，但这次还是在兼容性方面决定不兼容IE6浏览器：IE6的用户访问博客会默认显示一份未加样式的纯结构页面。并在网页顶部标题下显示一条加粗的提示句：

<!--[if IE 6]>
    童鞋请注意：本博客自新改版后，将不再温馨对待IE6用户。如果您是IE6用户，请选用更安全、功能更好的现代浏览器。
<![endif]-->

这次新模版的布局上，有意的采用了几种不同的布局方式。顶部的导航采用的是最常见的浮动方法；页面中左侧主体内容部分和右侧的侧边栏采用的是定位的方法；页脚部分的“专题列表”区域，针对IE7采用的是利用IE的一个经典BUG实现的“display:inline-block + vertical-align:text-top;”方法的布局；而针对非IE7的标准浏览器则应用了“display:table-cell”的方式来实现同样效果。看上去似乎很找罪受，但个人觉得布局的方式应该尽可能的多尝试，知其优劣，形成自己的理解，毕竟浮动并不是为了布局而生，就像table元素也不是为了布局而生一样。这块应该近期会形成一篇博客，阐述下自己的一些整理和理解性文字。

做前台的时候还无聊了一把，单独弄了一张“纯洁版”首页：没用到一个ID和CLASS选择器的首页。但这只是自身无聊的东西，实际中还是不建议如此的吹毛求疵，因为过多层级的选择器组合对渲染效率并无益处。博客实际中应用的首页也不是这个“纯洁”版本。

另外新模板在写结构的时候也留意了HTML5大纲的生成，做到大纲结构合理、层级清晰：

html5检测结果：

 点击这里在本站下载新博客的模板文件 （注：压缩包中的CSS文件已经做了压缩）

跨平台考虑

这次的页面除了兼容PC端主流现代浏览器之外，还考虑到了手机等移动设备用户的浏览需求。虽然自己明知道用手机来浏览我博客的用户可能一年也不会有1个，但还是做了这方面的尝试。运用的相关技术是CSS3的“Media Queries”，实现的效果是当终端浏览器尺寸横向上小于480像素时，会为其提供一个适合手机端浏览的网页：

但遗憾的是，我本身的手机非常老旧几乎不支持上网。手头也没有可以用来开发测试的手机，唯一的工具就是这个模拟手机屏幕分辨率的ProtoFluid。在这里面一切都好，但一次借朋友的M9上网一看又不一样，一问才知道M9的分辨率早就大于480了。只怪自己没这方面的经验，把问题想简单了。所以手机端的模板还要重新来做。查找了些资料（资料来源：http://blog.owncsser.com/），暂时弄出下面的表格，留作后用。

触摸屏

普通屏

 性能优化

 这次重新制作博客专门针对Page Speed和YSlow进行了前端性能优化，GTmetrix中测试得分如下：

其中Page Speed是30项检测，YSlow(2)是23项检测。如果采用YSlow的small site or blog（小型网站或博客，15项）的检测，得分是100满分：

这次在提升博客页面加载速度上做了特殊处理。除了按照上面2个性能检测给出的建议优化外，还养成了每篇博文的配图先经由PunyPNG压缩一遍的习惯。

事实也证明新版博客较之旧版的页面，性能上有了大幅提升，加载速度快了近一倍。

线上地址：http://www.osmn00.com/demo/css3-yinzhang/logo-demo.html

原版的印章如下（扫描+PS重新填色版，也就是我博客模板LOGO处的那个印章）

CSS3制作的印章如下，在非IE浏览器里都能很好的显示

但在IE里，就成这样子了：

这个效果CSS3可以做，另外采用HTML5的Canvas API也可以用脚本进行绘制，而且会简单轻松得多，可扩展性也强。简单点的应用可以用这个API做个“插件”给博客文章里的每个图片添加一个水印。只是这个水印是不直接印在图片里的，而是在图片之上 : p 

堂主译文地址：http://www.osmn00.com/translation/224.html

转载请尊重原作者及译者劳动，附带以上信息，谢谢合作~

印象里此文之前有人翻译过，但堂主也是在翻译完之后才得知的，所以此文之后在我的电脑里“躺”了5个月之久。直到今天翻移动硬盘寻找资料才发现还有这么个文章，想想毕竟是自己的劳动，同时也算是一个学习的笔记，于是发了出来。

----------------------------------- 分割线，以下是正文 ---------------------------------

CSS3给网页设计和开发人员带来的感受一直是痛并快乐着。一方面我们为CSS3所能解决的问题和展示的远景感到欣喜，另一方面却又为IE8对其支持的匮乏而惆怅。我们这篇文章里要谈论的就是IE8尚未支持的一部分CSS3技术。但是这并没什么太大关系，因为这个组件最有价值的应用环境——小型的如iPhone和Android设备等——已经可以很好的支持它了。

在这篇文章里我将说明如何使用一点点CSS3代码就能为你创建一个适应于iPhone浏览的网站版本。我们将看一个非常简单的例子，同时我也会讲述向我们自己的网站中添加一个适合移动小型设备浏览的样式表的过程来展示创造一个适合手机浏览的网站是多么的简单。

Media Queries

如果你曾经为一个网站创建过应用于打印设备的样式表，那么你不会对为特殊情况创建样式表的思路感到陌生。在CSS2中通过media types来应用这个功能。Media Types使你能够根据媒体的种类来应用样式，比如打印机和手持设备等。不幸的是，设备们从来都没对media types提供过什么好的支持，我们基本上看不到它有过什么应用。

CSS3继承并发扬了 Media Queries。不同于以往对设备型号的判断，这回它们将着眼点放在了设备自身的能力上，你可以使用它们来检查所有的事情，例如：

• 浏览器的宽和高
• 设备的宽和高
• 屏幕是横款还是竖款的
• 分辨率

如果用户拥有一款支持media queries的浏览器，那么我们就可以为某些特定的条件书写特别的CSS。比如，我们可以靠某些特征描述检测到用户使用的是智能手机，这样我们就可以为这种情况下的浏览提供一个特别的样式布局。来看一个例子，英国WEB开发者会议（UK web conference）dConstruct 刚刚推出了2010年集会的专题网站，其中便使用了media queries技术。

在PC机的桌面浏览器中访问的效果：

在iPhone中浏览：

从上面的截图可以看出这个网站并不是简单的将网站缩小来应付手机浏览，而是竟然将内容重新设计以便更适合小屏幕的手机浏览器来浏览。有些人可能会认为这仅仅是针对iPhone进行的一个布局，但其实在以Android为操作系统的手机上的Opera Mini 浏览器中，它们的显示是完全一致的。这个使用了media queries技术针对设备不同的支持能力开发的站点可以适合任何设备的访问——即使这些设备是网站开发人员所未考虑过的。

使用Media Queries为手机创建单独的样式表

我们从一个非常简单的例子开始，下面是一个简单的两栏布局：

为了使iPhone用户更容易阅读，我打算将两栏变成一栏，并把顶部的图片缩小以免用户没看到内容之前还得向下滚动一阵子屏幕。

首先要书写的media queries代码是下面这个用来识别小型设备的，

@media only screen and (max-device-width: 480px) {  

} 

下面我们在上面的大括号里书写针对小型设备的CSS，在这个层级中书写的代码会覆盖掉相应的专为大分辨率浏览器书写的那部分。下面我们来把两栏变为一栏再缩小那个图片：

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}

相应的图：

为这部分代码添加单独的外链

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

测试media queries

如果你手机里的浏览器支持media queries，那你可以自己测试你的代码，不过前提得是你要将你的代码传到线上的服务器。那么要是你的设备不支持media queries或者想要测试本机的代码该怎么办呢？

ProtoFluid便是这样一个可以帮到你的好好网站。这个程序容许你填写一个网址——甚至是本地的地址——并根据你选择的参数来模拟手机上是如何显示你的页面的。下面这个就是在ProtoFluid上模拟iPhone来浏览dConstruct的情况：

如果你有一个特殊尺寸的设备并且了解它的确定尺寸值，你也可以自定义窗体的数值来检测。

使用ProtoFluid我们需要对先前的语句做一下小的修改：设置一下“max-width”和“max-device-width”属性值。这样当你正常的桌面浏览器的窗口小于我们设置的宽度值时，media query也一样会起作用。

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

更新完上面的代码后，刷新你的浏览器并把窗口调整小，当窗口宽度小于你设置的值时，会触发media query，于是它起作用了，你会看到页面布局起了变化以适应480像素下的浏览需求。

你现在应该准备好去使用ProtoFluid了，ProtoFluid每秒之处在于你还可以使用像Firebug一样的工具去随时调整你的布局，这是你在Iphone上做不到的。显然你应该在尽可能的多的设备上检测你的布局，ProtoFluid使得开发和布局都变得非常简单。

如果你不想用户在改变桌面浏览器宽度时候触发media query使得页面布局发生变动，而只像这种布局不同仅仅出现在手持设备上，你可以把“max-width”部分去掉。

改造现有的网站

我保留了上面的那个简单的案例来演示这项技术。这项技术对于改造既有的网站的是很容易使用的。使用CSS进行布局的一大卖点便是可以为我们的设计在不同设备上提供替换方案。作为实验我决定在我自己的一个商业网站项目上应用这项技术进行布局。

这是我的网站在正常的桌面浏览器中的效果。

添加新的样式表：

我们面对的将是一系列样式的更改，因为我们要在手持设备上沿着垂直方向布局，所以我要书写一个新的样式表放在目前的（针对正常的桌面浏览器）样式表之后，并在屏幕尺寸小于480像素的时候通过media queries来加载它。

<link rel="stylesheet" type="text/css" 
media="only screen and (max-width: 480px), 
only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" /> 

为了创建我需要的样式表我选择了默认的样式表并把它另存为“small-device.css”文件。这样我只需要修改我要修改的部分，届时浏览器就会自动覆盖原有定义，而剩下的为改动的部分就可以直接从样式表里删除掉。

收缩顶部

首先要做的就是更换顶部LOGO图片以便在小屏幕的移动设备上显得更美观，我通过修改背景的方式而不是在结构里放入一张图片（原因大家自然都知道）。另外我还给顶部加了一个小背景。

body {
  background-image: url(/img/small-bg.png);
}

#wrapper {
  width: auto;
  margin: auto;
  text-align: left;
  background-image: url(/img/small-logo.png);
  background-position: left 5px;
  background-repeat: no-repeat;
  min-height: 400px; 
}

线性化布局

下一步是线性化布局，以便整个页面呈现单栏布局形态，这就要移除之前两栏布局时候的浮动和重新设置宽度值：

.article #aside {
  float: none;
  width: auto;  
}

整理

之后要做的就是在ProtoFluid里测试布局，这期间可能会要调整盒子的填充和边距等。在ProtoFluid里应用Firebug会使得工作变得轻松很多，我的大部分工作都是在Firebug环境中完成，当布局呈现出我想要的效果时，我就复制Firebug里的CSS到我网站的样式文件里去。

用在ProtoFluid测试网站。

在Iphone里测试

创建好我的样式表并且上传到空间后，我像在真正的手持设备中对它进行检测。在Iphone里我发现我那给力的单栏网页要比我预期中的显现差距蛮大。一顿搜索后我在“Safari开发者网站”中找到了答案——在网站head中添加一个meta元素设置width和device width相等。

<meta name="viewport" content="width=device-width" /> 

现在一切都太平了

我们这里只是通过一个简单的改造来展示如何为你的网站添加一个支持移动设备的版本。如果我要从头开始创建一个网站的话，我肯定会使用Media Queries技术，而且有那么多的可选方法来使得这个过程变得简单。比如采用单栏布局，尽可能的使用背景图片以便可以通过CSS来替换它们，再比如使用fluid images。

堂主注：作者的这个网站的地址是：http://www.edgeofmyseat.com/

更多资源

虽然这是一项很新的技术，但针对这个主题现在已经有很多非常好教程可供学习了：

• A List Apart – Responsive Web Design
• Apple – Safari Web Content Guide
• Sitepoint CSS Reference – Media Queries
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries
• Aral Balkan: How to make your web content look stunning on the iPhone 4′s new Retina Display
• Stuff and Nonsense: Proportional leading with CSS3 Media Queries
• Matthew James Taylor: iPad layout with landscape and portrait modes

向前兼容

这篇文章是在默认移动设备的浏览器是支持media queries的。如果你平常只是在Iphone或者Opera mini下浏览网站，那你大可不必担心支持性的问题。但如果你像在桌面浏览器中应用这一技术，现在也有很多方法可供你学习使用——可以通过添加JavaScript来使IE8和更低版本的IE浏览器和火狐3.5之前的版本支持这项技术。IE9版本可以支持CSS3的 Media Queries。

• Media Queries section on When Can I Use, showing which browsers have support
• Media Queries jQuery plugin (only deals with max/min width)
• css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers

更多的实践者

这里提供一些其他的Media Queries技术的酷酷实践者：Jon Hicks 的网站Hicksdesign使用了Media Queries技术，不单单为移动设备的访问者提供良好的浏览体验，同时也支持那些把浏览器窗口设置过小的桌面浏览器使用者。另外，Simon Collison’s website 和 Ed Merritt’s portfolio 也展示了另外2个这项技术的实际应用案例。

实际体验一下吧！

Media Queries技术是你目前日常工作中可以立即开始使用的一项CSS3技术。值得我们记住的是，支持media queries的浏览器往往也支持很多CSS3的其他属性，这样我们就可以在样式表中添加很多CSS3的属性，比如为Iphone或其他手持设备的用户创建一个圆角矩形。如果你想为你的网站使用media queries，那么读完这篇文章后就开始吧！

堂主目前正在制作的、即将启用的博客新前台模板，便采用了这项技术，使得页面可以在小屏幕的移动设备上依然提供良好体验：

新博客首页模板在线DEMO地址：http://osmn00.com/demo/newblog/

正常桌面浏览器下：

ProtoFluid模拟的Iphone下：

http://www.osmn00.com/rebuild/223.html

-------------------------------- 分割线 ----------------------------------

HTML大纲算法

HTML中存在着一个大纲算法，大纲可以为用户提供同一份页面的信息结构目录，就像之前我们在word和pdf文档中体验过的那样。

PDF文档中的目录结构：

没有HTML5之前

HTML5之前的HTML4，唯一的方式是采用<h1> ~ <h6>元素来创建大纲。因为正常习惯下，<h1> ~ <h6>表示了从第一级到第六级的层级递减标题，而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲，不单单对于搜索引擎的优化，更是为借助于屏幕阅读器浏览器网页的盲人（或弱视力）用户提供了巨大的帮助。

在非采用HTML5对网页进行重构的情况下，合理正确的使用标题元素依然可以为文档赋予一个良好结构的大纲，比如目前堂主博客的首页模板：

这个首页采用了如下的结构：

<body>
<h1>堂主 - WEB前端开发</h1>

<h2>博客导航</h2>
<ul>...</ul>

<h2>文章列表</h2>
  <ol>
    <li><h3>...</h3></li>
  </ol>

<h2>边栏应用标题...</h2>
  ...

</body>

现实不总是那么美好

但在某些情况下，比如一个标题下还需要一个副标题；或者网站本身是聚合性质的，内容都是以模块的形式从其他网站摘取、嵌入、拼合而成。那么这种情况下，原有技术基础上的大纲算法会提供一个灾难性的大纲目录。

比如我为我的博客名称添加一个副标题（或者在其他情景的时候会为一篇文章添加一个副标题；或者像现在流行的团购网站那样，在网站LOGO+名称的下面都会来上一句口号），就像我们经常在WordPress中做的那样：

OK，我为我的博客增加了一个副标题，结构代码可能会变成下面这样：

<body>
<h1>堂主 - WEB前端开发</h1>
<h2>Code is art!</h2>
...

</body>

此时页面大纲会变成下面的样子：

我这里只是增加了一个博客副标题，结果大纲目录中新增加出来一个标号为1的二级“Code is art !”标题，这会弄得屏幕阅读器用户晕头转向：因为这只是博客名称的副标题，而不是某块内容区域的实用性指向标题。无奈的替换办法一般是将这个副标题放入<p></p>中，并设置<p class="subheading">来对段落中的内容进行说明。但这么做是在损害我们代码的语义性，因为这部分文字毕竟是一个标题而不是一段简单的内容文字。

试想如果一个网页是聚合类网页，里面呈现很多条从信息源网站摘取来的文章块（包括该文章的标题和简述），如果不同信息源的文章标题使用的元素还不一致（有的是<h1>有的可能是根据自身页面上下文采用其他等级的H），那么该聚合网页的大纲会是多么的魔鬼！盲人用户会不会高呼“杀了我！”？

新技术带来的解脱

于是新的HTML5中定义了一个非常严谨的大纲算法，并且对语义性内容布局元素赋予了一个“开始新的节”的功能。个人理解，HTML5中，元素在大纲中的表现可以简单分为以下三类：

• 无作为
• 开始一个新的节
• 成节的根

无作为

“无作为”是我个人对这类元素的称呼，它们在页面大纲中不会产生新的节。如下面的这段代码：

<div>这是一个没有语义的层</div>
<ul>
  <li>一个无序列表</li>
</ul>

 在浏览器的“HTML5 Outliner”插件中（本文末尾会介绍2款浏览器中使用的插件）查看会如下呈现：

大纲中没有子节，只有一个无标题的body根。

开始一个新的节

而像<article>、<section>、<nav>、<aside>等新的语义性元素，会开始一个新的节，如下代码：

<body>
<section>这是页面中的一个主题区域</section>
<aside>这是页面中的一个边栏区域</aside>
</body>

 在浏览器的“HTML5 Outliner”插件中查看会如下呈现：

另外已有的<h1> ~ <h6> 也会创建新的节，但H元素在创建新的节的时候会遵循一个出现的顺序的问题，如下两段不同代码演示的：

<body>
  <h1>H1</h1>
  <h2>H2</h2>
  <h3>H3</h3>
  <h4>H4</h4>
  <h5>H5</h5>
  <h6>H6</h6>
  
  <h6>H6</h6>
  <h5>H5</h5>
  <h4>H4</h4>
  <h3>H3</h3>
  <h2>H2</h2>
  <h1>H1</h1>
</body>

同一节中，H元素会依照自身大小创建新的节和归属不同级别。如果我们改一下倒序列中的<h6>为<h3>

<body>
  <h1>H1</h1>
  <h2>H2</h2>
  <h3>H3</h3>
  <h4>H4</h4>
  <h5>H5</h5>
  <h6>H6</h6>
  
  <h3>H3</h3>
  <h5>H5</h5>
  <h4>H4</h4>
  <h3>H3</h3>
  <h2>H2</h2>
  <h1>H1</h1>
</body>

 那么其的大纲会变为下面的样子：

背后的逻辑是：出现在最前面的<h1>创建了一个新的节，其后的所有小于它的H元素都在其创建的节内再创建子节。一个节内，同重的H元素在大纲中会出现在相同的级中。所以后面倒序的H元素会像上面截图中那样呈现。

成节的根

《HTML5用户指南》中这样介绍这类元素：

某些元素（<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>）叫做成节的跟，并且它们可以拥有自己的大纲。但是，这些元素中的节和标题对于它们的祖先的大纲没有任何影响。

 简单的说，在<body>里，如果你使用了<blockquote>等，即时它们自身包含的内容中有用于创建新的节的元素（<h2>或者一个<nav>），但在针对body这个根的大纲里，这些也都不会显示。如下代码：

<body>
  <h1>H1</h1>
  <section>
    <h2>您吃了么？</h2>
  </section>
  
  <blockquote>
    <section>
      <h2>今天星期几？</h2>
    </section>
  </blockquote>
  
  <section>
    <h2>吃了！</h2>
  </section>
</body>

很明显，虽然<blockquote>里包含了<section>和<h2>，但在大纲中并无显示。

小工具

对于大纲的可视化，这里介绍2款浏览器中应用的插件。《HTML5用户指南》和《HTML5揭秘》中都给出了一个在线测试查看的网址，不过我这里测试都是网页测试程序存在问题。还好我们有更方便的替代方案——浏览器插件。

Opera平台上的插件

Opera的这款HTML5 Outliner插件需要安装Opera 11及以上版本的浏览器。浏览器下载地址可以去官网下载，插件地址在这里：https://addons.opera.com/addons/extensions/details/html5-outliner/1.0/?display=en

安装完成后打开浏览器，会在右上角出现一个HTML5 Outliner的按钮：

打开要查看的网站，点击这个按钮就OK了：

Chrome下的插件

同样，扩展搜索中搜索：HTML5 Outliner

安装：

安装完之后默认在浏览器上不会出现变化，但在访问某个网址的时候，会在地址栏右侧，“书签”按钮的左侧显示出“HTML5 Outliner”的按钮：

使用方法同样，网页加载完毕后点击这个按钮：

后记

堂主写这篇博客的时候尚不清楚目前浏览器对HTML5的大纲算法支持程度究竟怎样，手头的资料显示的是尚无一款能完整支持的浏览器。这意味着目前的屏幕阅读器用户可能不会很快体验到新技术带来的便利。这就要求我们在编写页面的时候最好遵循文档中节的套嵌层级使用相应的H元素，保证标题的层级正确。避免所有层级都只用<h1>——即使这么做在新的HTML5中是属于容许范围的。

目前新界面正在PSD设计阶段，新的博客前台将应用一些之前接触过但没系统结合过的手法：黄金分割、精确校准、同色系、HTML5、CSS3、无侵入脚本编程、优雅降级、侧重渲染效率、无障碍、支持移动设备等等。

同时这回也坚定了一下决心，不再温馨对待IE6用户。届时可能会对IE6用户展示一个无样式的结构文档或其他方式，来在保证基本内容可阅读的同时提示用户更换更现代的浏览器。

放出一些局部来显显：

点击可看大图。

 PSD：点击下载

堂主译文地址：http://www.osmn00.com/translation/222.html

转载请尊重原作者及译者劳动，附带以上信息，谢谢合作~

前注：高对比度模式是一种Windows系统设置主题，其意是为了保证视力受损用户查看信息的方便。
它通过使用对比鲜明的色彩和字体大小提高文本的可读性。高对比度模式下网页的背景默认会变成全黑。

-------------------- 分割线，以下是正文 --------------------

CSS image sprites是一项用来减少网页中图片HTTP请求数的技术，但因其会导致在windows高对比度模式下图片消失的问题，故其导致的web应用性能的提升和对无障碍体验被破坏之间的矛盾正逐渐引起大家的关注。导致这一问题的原因是这一技术通常是应用CSS的“background-image”这一属性来创建的。

为了证明这个问题，我们在高对比度模式下浏览一些当下的知名网站（上面的是普通模式，下面的是高对比度模式）：

 在Google Video中，前后选项的按钮消失了：

在雅虎法国的网站中，导航项和按钮消失了：

同样在Facebook、亚马逊和AOL音乐中，LOGO也消失了：

同样，流行的内容共享服务的按钮也没了：

Sprite技术的使用的确为更多网站的优化加载速度的体验贡献甚大，但我们要承认，这个过程中我们忽略并损害了使用高对比度模式用户的体验。

<img> Sprites 的介绍

 在对应用了新的企业标识文字的图形化标题（图片展示标题）的AOL.com的新的设计中，我决定尝试多年前就想过却一直没使用的东西。

由于<img>元素可以在高对比度模式下显示，那么为什么我们不可以通过裁剪图片的方式来完成我们想要的效果呢？

这个案例中我们的图形化标题的HTML结果是下面这个样子：

<h2 class="popular"><img src="img-sprite.png" alt="" />Popular</h2>
<h2 class="featured"><img src="img-sprite.png" alt="" />Featured</h2>

我们把alt属性值设置为空以便屏幕阅读器可以越过它们，我们在标题中写了如“Featured”这样的文字以便搜索引擎可以知道这部分是关于什么的（这可比在alt里添加来得实用）。

下面的是我们要设置的CSS：

h2 {
  	overflow: hidden;
  	position: relative;
  	height: 50px;
  	width: 200px;  
}  

h2 img {
  	position: relative;  
}  

h2.popular img {
  	top: -100px;  
}  

h2.featured img {
  	top: -200px;  
}

不解释了，相信大家一眼就能看明白这是怎么回事。

关于测试环境

有2种方法进入高对比度模式

【一】带有强迫症性质的按部就班法：

1. 开始菜单 -- 控制面板
2. 打开辅助功能选项
3. 点击“显示”
4. 勾选“使用高对比度”
5. 确认

【二】懒人万岁的快捷键：

左Alt + 左Shift + Printscreen

<img> Sprite 实例

下面是2个案例，一个是CSS Sprite技术，一个是<img> Sprite技术的，2种模式下都Look Look，做一个“找不同”的小游戏。

CSS Sprite demo

<img> Sprite demo

已知的应用限制

这项技术应用的前提是图片要放置在块元素或者设置了“display: block”属性的内联元素中。<img>在下列元素中时不起作用：

<fieldset> , <legend> , <input> , <button> , <table> , <tr> , <td> , <th>

测试所用的浏览器版本是IE6+，Firefox 3.5+，Chrome和Safari 4+，并且估计在所有现代浏览器下都没问题。

高对比度模式检测

Chris Blouch 还在AXS的无障碍JS库中创建了一个高对比度模式检测的模块，如果你的网站目前已经遇到了这方面的问题并且想改进它，可以在下面的地址获取这个库更多的信息：

http://dev.aol.com/downloads/axs1.2/readme.html#hd

更牛叉的：它能支持打印设备

很多人都在抱怨使用背景图技术的CSS雪碧对打印设备支持的糟烂，而这里的<img>雪碧技术就没这个问题。

CSS Sprite技术打印出来的：

<img> Sprite技术打印出来的：

延伸阅读：

Thierry Koblentz 的 http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp 文章，他的对图片设置“width="0" height="1"”的应用使得浏览器在禁用图片的情况下依然可以友好显示内容

渔隐的http://nunumick.me/blog/tag/img-sprites/文章，中文的，说明了<img> Sprite的优势和不足的情况。

堂主译文地址：http://www.osmn00.com/translation/221.html

转载请尊重原作者及译者劳动，附带以上信息，谢谢合作~

-------------------- 分割线，以下是正文 --------------------

10年前，只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支持即不完善又漏洞百出，所以这些人在坚持WEB标准化的同时，也不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示。其中一个被使用的越来越多的hack技术是浏览器嗅探（browser sniffing），使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。浏览器嗅探技术可以快捷的将代码进行分支，以便针对不同的浏览器应用不同的指令。

今天，以CSS为基础进行的布局已经非常普遍，浏览器们对它的支持也非常的坚实。但是现在CSS3和HTML5来了，历史转了个圈又回到了原地——各个浏览器对这些新技术的支持又开始变得参差不齐了。我们早都习惯了书写整洁的符合标准的代码，也不会再使用CSS hacks或者浏览器嗅探这些不靠谱又低级的技术。我们也相信越来越多的用户会认同网站不必在所有浏览器里都看起来一样的理念。那面对当下这个熟悉的情形（浏览器支持的不同），我们该怎么做呢？简单：使用特征检测（feature detection），这意味着我们不必通过问浏览器“你是谁？”来做出不靠谱的推测。取而代之，我们问浏览器“你能做这个或那个吗”。这么来检测浏览器的能力是很简便的，但一个个的花时间去手工测试依然令人厌烦。此时Modernizr可以帮助我们。

Modernizr：专为HTML5和CSS3开发的功能检测类库

Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 <input>标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。

Modernizr是基于渐进增强理论来开发的，所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加增强的应用层。因为使用了Modernizr，所以你容易知道浏览器都支持什么。下面我们来看一个通过应用Modernizr来创建尖端网站的实例。

从应用Modernizr开始

首先从www.modernizr.com下载Modernizr的最新的稳定版（目前国内封了Modernizr的官网，我们可以从github上下载。或者更简单点，可以从堂主这里下载最新的1.7版的脚本文件），在官网上你还可以看到它支持检测的所有特性的清单（本文末位会给出这些清单，以便翻不了墙的童鞋可以知道都支持哪些）。下载完最新版本以后（作者写这篇文章的时候用的是1.5版），把它加入页面的<head>区域：

<!DOCTYPE html>  
<html>  
<head>  	
<meta charset="utf-8">  	
<title>My Beautiful Sample Page</title>  	
<script src="modernizr-1.5.min.js"></script>  
</head>  
…

接下来，向<html>元素添加“no-js”的类。

<html class="no-js">

当Modernizr运行的时候，它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情，它还会为所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。所以，你的<html>元素可能会变得看起来像下面这个样子：

<html class="js canvas canvastext no-geolocation rgba hsla   
multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns   
cssgradients cssreflections csstransforms csstransforms3d csstransitions video   
audio localstorage sessionstorage webworkers applicationcache fontface">

Modernizr同时还会创建一个JS对象，被命名为“Modernizr”，其内容是为每一个检测完的特性给出的布尔值结果组成的列表。如果浏览器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；如果浏览器不支持这个新元素，那它对应的值就是false。这个JS对象针对某些功能还会包含更为详细的信息，如“Modernizr.video.h264”会告诉你浏览器是否支持这个特殊的编解码器。“Modernizr.inputtypes.search”会告诉你当前浏览器是否支持新的search input类型，等等。

我们的未加工的简单小页面看起来有点像一个准测试系统了，但它具备更好的语义性和可访问性。让我们为它添加一点基本的样式：一点文字格式、颜色和布局以使它更好看。目前位置，没什么新东西，只是为一个语义化结构的HTML页面添加表现样式，看看添加了样式后的页面。

下面，我们要增强这个页面使得它更有意思。我想为头部的h1应用一个奇特的文字效果，把关于检测特性的列表分为两栏，然后将带有一张照片的关于Modernizr的部分的一切都弄到右边去。我还要把围绕页面内容的边框变美点。现在，更给力的CSS3使你可以对一条规则添加更多的属性，如果浏览器不支持这些属性，它会忽略它们。配合使用CSS的层叠（继承），你可以不必依赖Modernizr而使用像“border-radius”这样的新属性。不过，使用Modernizr可以为你提供一些既有手段提供不了的功能：根据浏览器对新东西支持的差异动态修改的<html>的类名。我会通过对我们的页面添加2条新的规则来说明这点：

.borderradius #content {
  	border: 1px solid #141414;
  	-webkit-border-radius: 12px;
  	-moz-border-radius: 12px;
  	border-radius: 12px;  
}  
.boxshadow #content {
  	border: none;
  	-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  	box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  
}

第一条规则为“#content ”元素添加了一个12像素的圆角。但在既有的页面里我们已经为“#content ”元素设置了一个属性值为“2px outset #666”的边框，这在box是直角的时候是蛮好看的，但在圆角情况下就不是了。感谢Modernizr，我可以在浏览器支持“border-radius”的情况下给box设置一个1px的实边。

第二条规则更进步了一点，我们为“#content ”元素添加了一个阴影，并且针对支持“box-shadow”属性的浏览器一并移除了border属性。为什么呢？因为大部分浏览器并不为“边框附带边角”的组合外加阴影这样的效果提供一个好的表现（这是一个应该被注意的浏览器的瑕疵，但我们现在却必须忍受它）。同不使用阴影只使用边框相比，我宁可只使用阴影包围元素。采用这种方式，我可以拥有全世界最好的，准确点的，最好的一种CSS表现：在支持“box-shadow”属性的浏览器里将会呈现一个美妙的阴影；只支持“border-radius”属性的浏览器将会呈现一个好看的圆角薄边框；对于那些这2者都不支持的破烂浏览器，我们会看到一个2像素的直角边框。

下面我们要为header应用一个自定义的特殊字体，下面的是我们目前针对h1的声明，没改动版的：

h1 {
  	color: #e33a89;
  	font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
  	"Book Antiqua", Georgia, serif;
  	margin: 0;
  	text-shadow: #aaa 5px 5px 5px;  
}

这些声明在我们的基础网页里工作良好，27像素的文字大小也很适合我们为h1设置的那些字体的展示。但对于我要用的名叫“Beautiful”的字体来说，27像素就太小了。下面我们要添加其他的规则来使用这个自定义字体：

@font-face {
  	src: url(Beautiful-ES.ttf);
  	font-family: "Beautiful";  
}  

.fontface h1 {
  	font: 42px/50px Beautiful;
  	text-shadow: none;  
}

首先，我们添加“@font-face”声明，并在其中为我们的自定义字体指定路径、文件名和字体名。之后我们用一条CSS语句为我们的h1选择字体样式。你会看到，我这里选择了一个很大的字号，那是因为“Beautiful”字体本身就比其他字体的文字要小很多，所以我们必须要指示浏览器在展示我们自定义字体的时候，给予h1一个很大的字号。

此外，我们漂亮的手写体文字在文字阴影方面存在一些渲染问题，所以我们要在浏览器决定使用自定义文字时取消文字的阴影。另外，关于检测特征部分的列表还需要被分为两栏。为了达到目的，我要使用牛叉的CSS columns 属性，这一属性会使浏览器把列表智能分栏而不会打乱它的顺序，而我们的列表，虽然没有数字序号，却也是按照字母顺序排列的。当然，不是所有的浏览器都支持这一属性，对于那些不支持的浏览器，我们使用浮动来达到2栏的目的——使用了浮动后列表在视觉上不会再按照字母顺序排列，但那也好过什么都没有。

.csscolumns ol.features {
  	-moz-column-count: 2;
  	-webkit-columns: 2;
  	-o-columns: 2;
  	columns: 2;
  }  

.no-csscolumns ol.features {
  	float: left;
  	margin: 0 0 20px;
  }  

.no-csscolumns ol.features li {
  	float: left;
  	width: 180px;  
}

我又一次使用了Modernizr来针对不同的情况设置不同的属性。如果浏览器支持CSS columns，它就会把列表完美的分为2栏，如果不支持，通过Modernizr为<html>添加的“no-csscolumns”类我们也可以用浮动的方式使得列表变为两栏，虽然不那么完美，但也比直接来一个长串的单栏列表强。

这里您可能注意到了我为属性添加了不同的前缀（-moz-、-webkit-、-o-），这是因为不同的浏览器厂商对该功能的实现有不同的定义，所以要实现该功能需要针对不同的浏览器加上它们对应的前缀。

经过这些改变，我们新的页面看起来更好了。

我们将为我们的页面添加进更多的渐进式增强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效，如CSS变换、动画和三维转换等。并且我想在最后一个阶段的页面中应用一些这类特效。再一次的，这些属性会被添加进我们既有的CSS中并在不支持它们的浏览器中给忽视。所以，针对这种一方面是渐进增强一方面是不被支持的情况，使用Modernizr是恰当的。

首先设置的：

@-webkit-keyframes spin {
  	  0% { -webkit-transform: rotateY(0); }
  	100% { -webkit-transform: rotateY(360deg); }  
}  

.csstransforms3d.cssanimations section {
  	-webkit-perspective: 1000;  
}

@keyframes规则是新的CSS animations规范中的一部分，目前只有WebKit支持。它容许你针对任何属性声明一个完整的动画路径，并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识，请阅读 W3C Working Draft specification。

下面我们添加使得我们一个元素在三维空间里旋转的代码：

.csstransforms3d.cssanimations section h2 {
  	background-image: url(modernizr-logo.png);
  	overflow: hidden;
  	-webkit-animation: spin 2s linear infinite;  
}

因为logo要转动，且又希望它转的时候和背景相处的融洽些，于是这里用了一个png格式的文件。我还采用了一个“overflow:hidden”属性来隐藏设置了缩进-9999像素的header里的文字。使元素以3D的形式旋转虽然有趣却并不太美观。最终，我们选择使用animation规则，设置它的旋转周期为2秒钟，沿着自身的中轴线旋转，永不停止。

最终的页面看起来很给力，甚至还针对WebKit浏览器设置了好玩的动画。我希望到现在你能明白使用Modernizr可以使你对网站控制的手腕变得多么牛叉，以及它可以令真正的渐进增强变得多么简单。这还不仅仅是Modernizr的全部好处，它还可以帮你建立基于JS的fallbacks以及可以帮你应用html5那些牛掰的新特性。

附，Modernizr检测清单：

1. @font-face
2. Canvas
3. Canvas Text
4. WebGL
5. HTML5 Audio
6. HTML5 Audio formats
7. HTML5 Video
8. HTML5 Video formats
9. rgba()
10. hsla()
11. border-image
12. border-radius
13. box-shadow
14. text-shadow
15. Multiple backgrounds
16. background-size
17. opacity
18. CSS Animations
19. CSS Columns
20. CSS Gradients
21. CSS Reflections
22. CSS 2D Transforms
23. CSS 3D Transforms
24. Flexible Box Model
25. CSS Transitions
26. Geolocation API
27. Input Types
28. Input Attributes
29. localStorage
30. sessionStorage
31. Web Workers
32. applicationCache
33. SVG
34. Inline SVG
35. SVG Clip paths
36. SMIL
37. Web SQL Database
38. IndexedDB
39. Web Sockets
40. hashchange Event
41. History Management
42. Drag and Drop
43. Cross-window Messaging
44. Touch Events