使用伪元素实现CSS图片替换（NIR）— 译文
第一次翻译，E文实在荒废太惨，借助有道极多，多多包含，欢迎指正^^
原文出处：http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
———————————————我乃分割线———————————————
这是一种使用伪元素和content生成内容的改良性图片替换方法，在图片和/或CSS失效时发挥作用，并且适用于透明图片，同时避免了对浏览者和搜索引擎隐藏文字，另外作者也为IE6和IE7准备了渐进式退化方法。
浏览器支持：Firefox 1.5+, Safari 3+, Chrome 3+, Opera 9+, IE8+
为什么不使用传统的方法？
目前被广泛应用的两种图片替换技术为Gilder/Levin Method和Phark Method，都存在各自的缺点。
———————— 译者添加 ————————
目前国内更为广泛应用的应该是Phark法，即text-indent法。Gilder/Levin图片覆盖法普及度相对低一些，上个demo解释：
提示：你可以先修改部分代码再运行。
这也是本人最近在折腾的，上一篇文章里头主要是讲这个。
———————— 译者添加 ————————
Gilder/Levin法需要添加一个空的HTML标签（例如空span）覆盖默认文本，并且在使用png透明图片时失效，Phark 法使用负值text-indent隐藏文字因此当CSS有效但图片失效时将会什么也看不到。
NIR法的来源
使用伪元素和content生成内容实现图片替换并不是新想法，Paul Nash在2006年已经提出和证实过了。详见：Nash图片替换法
<h1 class="nir">[content]</h1>.nir {
height:100px; /* height of replacement image */
padding:0;
margin:0;
overflow:hidden;
}
.nir:before {
content:url(image.gif);
display:block;
}元素高度和替换图片一致，定义overflow:hidden保证当图片加载时原始的content内容隐藏。:before伪元素被定义为块元素以显示插入了替换图像的content属性的内容。
IE6和IE7怎么整？
这两个浏览器都不支持:before伪元素，若要实现图片替换只能靠Phark法了。这里可以使用条件注释为老旧的IE浏览器提供解决方法。
使用NIR法可以保证HTML的语义化，同时为使用优秀浏览器的用户提供更好的用户体验。而Phark法则为IE6\7用户提供基本的浏览效果。
<!--[if lte IE 7]>
<style type="text/css">
.nir {
height:100px;
padding:0;
margin:0;
overflow:hidden;
text-indent:-9000px;
background:url(image.gif) no-repeat 0 0;
}
</style>
<![endif]-->
NIR法的改进
NIR的第一个问题是如果图片失效，所有浏览器下content内容上将会呈现空白，Opera 10.5 还会显示文字“image”。在图片失效时，如果包含元素的高度过小这些空白将导致content内容超出部分或者全部隐藏。
另一种情况是当图片不存在或者加载失败时，Safari和Chrome将会显示一个“没有图片”的图标并且无法移除。这将会使元素的content内容超出，用户将只能看到部分图片或者完全看不到。
更完善的NIR法做了如下修改：
.nir {
height:100px; /* height of replacement image */
width:400px; /* width of replacement image */
padding:0;
margin:0;
overflow:hidden;
}
.nir:before {
content:url(image.gif);
display:inline-block;
font-size:0;
line-height:0;
}定义字号font-size和行高line-height为0可避免所有浏览器下的空白问题，定义元素的宽度与替换图片的宽度一致并定义伪元素为内联块可避免webkit内核浏览器下图片加载失败所产生的问题。
当伪类的content包含图片加载失败时，完美的浏览器厂商应该避免显示任何内容，这样初版的NIR法就可以解决问题了。
使用图片整合又怎么整？
最广泛应用图片替换的地方应该是导航，鼠标经过:hover和鼠标激活:active状态下的图片也是经常使用一个大图片整合，优秀浏览器下使用图片整合是完全没有问题的。使用改良版NIR法，content包含的整合图片的位置取决于负值的margin。
下面是改进的Web Designer Wall网站右侧分类导航的应用实例，使用用了图片整合及改进的NIR法。
<ul id="nav">
<li id="nav-item-1"><a href="#non">Tutorials</a></li>
<li id="nav-item-2"><a href="#non">Trends</a></li>
<li id="nav-item-3"><a href="#non">General</a></li>
</ul>/* modified-NIR */
#nav a {
display:block;
width:225px;
height:46px;
overflow:hidden;
}
#nav a:before {
content:url(sprite.png);
display:-moz-inline-block; /* for Firefox 1.5 & 2 */
display:inline-block;
font-size:0;
line-height:0;
}
/* repositioning the sprite */
#nav-item-1 a:hover:before,
#nav-item-1 a:focus:before,
#nav-item-1 a:active:before {margin:-46px 0 0;}
#nav-item-2 a:before {margin:-92px 0 0;}
#nav-item-2 a:hover:before,
#nav-item-2 a:focus:before,
#nav-item-2 a:active:before {margin:-138px 0 0;}
#nav-item-3 a:before {margin:-184px 0 0;}
#nav-item-3 a:hover:before,
#nav-item-3 a:focus:before,
#nav-item-3 a:active:before {margin:-230px 0 0;}
/* :hover hack for IE8 if no a:hover styles declared */
#nav a:hover {cursor:pointer;}出于某些原因，当鼠标经过时IE8无法重新定位图片的位置除非预先设定了a:hover的样式，知道大多数情况下需要在页面上对a:hover定义基础的链接样式就够了。当然你得知道这是IE8的行为。
添加的display:-moz-inline-block; 是为低于3.0版本的Firefox浏览器（译者注：低于3.0的FF不支持inline-block属性但支持FF私有的-moz-inline-block属性）准备的，否则无法重新定位整合图片的位置。这些浏览器的使用者很少，但我认为对古董浏览器提供支持是有必要的。
如果你想在IE6\7下使用图片替换，使用条件注释添加下面的样式可以解决问题。
/* Phark IR method */
#nav a {
text-indent:-9000px;
background:url(sprite.png) no-repeat;
}
/* repositioning the sprite */
#nav-item-1 a:hover,
#nav-item-1 a:active {background-position:0 -46px;}
#nav-item-2 a {background-position:0 -92px;}
#nav-item-2 a:hover,
#nav-item-2 a:hover {background-position:0 -138px;}
#nav-item-3 a {background-position:0 -184px;}
#nav-item-3 a:hover,
#nav-item-3 a:active {background-position:0 -230px;}
/* hack for IE6 */
#nav a:hover {margin:0;}这里只做了一点简单的修改，但IE6下a:hover的a:hover:before伪类默认有外边距，需在css里重置。
现在来看 使用了图片整合的NIR改良版Demo
CSS3的content生成内容
Dave Shea 2005年的文章Image Replacement. Again里，他建议理想的解决方法是在CSS3里添加content属性。
h1 {
content: url(image.gif);
}在部分现代浏览器包括IE8和FF3.5里并不支持这个属性，如果图片加载失败时，那些支持CSS3 content属性的浏览器无法显示content包含的内容。此外我不认为这个方法能够使用图片整合，鉴于这些问题还不如使用改良版NIR法。
———————————————我乃分割线———————————————
伪类的另一种应用还可看作者的另一篇文章：
使用css2.1实现多重背景、多重边框效果（译文）
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/（原文）
内牛满面地译完，生硬之处太多，各位还是主要看原文和demo吧。主要是最近对图片替换好奇比较大刚好看到不错的文章就翻过来了。蛮有收获，作者考虑很细致，PFPF。
改良版NIR法图片失效的情况下，我测了chrome和safari5，content里仍是有“没有图片”的图标显示，FF3.6和OP10.6表现不错，所以囧了。。。不过翻这篇文主要目的是介绍更好的图片替换方法，目前来看依旧都不完美，负值缩进还是图片遮盖或者伪类content，斟酌着用吧。 
PS：使用text-indent隐藏文字的时候注意顺便加个overflow:hidden;以免内容超出，例如FF下a链接激活时虚线会无限延伸，IE下也会有类似的状况。
牙疼 – Firefox下的button图片替换
其实我想用蛋疼，但鉴于实在没有以及不雅，那就牙疼吧，谁让咱智齿没事就发炎折磨我，意会就好。
之前很长一段时间里我习惯用<input type=”button” />，不过鉴于“使用button能对元素如何在浏览器中显示提供更多的控制，创建更漂亮、混杂更多内容的文字按钮。”，鉴于需要更多控制，那button吧，只是button也不是那么happy。。
提示：你可以先修改部分代码再运行。
好好的，是啊好好的，只是没有图片P都看不到而已。。所以继续折腾
提示：你可以先修改部分代码再运行。
文字被顶没了，换个方法来放，绝对定位span，使用前景图遮盖按钮文字，以保证图片未加载or加载太慢的可用性。
提示：你可以先修改部分代码再运行。
至此，为了兼容FF，万分牙疼的demo，出来了。。。。
提示：你可以先修改部分代码再运行。
另外一种方法，无意中在蚂蚁的项目里搞成这了，无意中程序配合对了，也是凑合的。。
提示：你可以先修改部分代码再运行。
鉴于实在太过牙疼，一般的按钮凑合凑合过去，很重要的按钮（例如我家那破网速几乎看不到的淘宝搜索按钮那图片 
）还是倒腾倒腾吧。
但其实demo出来了一个按钮OK了千千万万个按钮也就OK了，按钮多了图片还能省呢。
呐…一年…
刚好阿盖让帮忙看下学历信息查询是否正常，既然查到了就截个图吧，2块钱的查询费不能就这么浪费了。
看到这个也才搞清楚了准确的日期，去年确实是6月26毕业，27离校，然后回了，也顺便在南昌待了几天看了猪芊。
然后回家待了几天，然后7月19来的深圳。然后呢，然后就这么一年了。
这一年很奇怪，奇怪到我会想家了，会想回福建了，会想干脆去厦门发展好了。
只是念头，最近萌生的，没有强烈到赶紧屁颠屁颠收拾包袱滚回去了。
会想待在深圳做啥呢，如果说是工作省内的话厦门现在环境应该也不错，如果说是看看也差不多了。
只是不能这么任性，至少要有一份干满一年的工作吧，至少还要再试试来深圳的最初动力，至少还要磨得更成熟点吧。
只是也有点郁卒，生活圈工作圈都在与省内的同学严重脱节。只能聊些不痛不痒的话，还是偶尔的。
省内的同学多在泉州厦门市区，我都不熟，想象如果是要在那里租房找工作生活，怪异感很重。
从小窝在惠安土生土长，只是偶尔会去泉州厦门，然后就屁颠屁颠出省了，福建那些市区生活是什么样的我一点都不清楚。
再过几年成什么呢，也许真成阿骚仔了，这么漂也不好玩的。
尽管这么想着，还在边计划着以后去杭州去江苏去黑龙江去四川去云南走走溜溜，我这是伪思乡吧分明。。
那个西安么是绝对要再去的，去看人结婚去掏份子钱去看人养老母鸡看人当村主任。
现在不只是看到福建人会觉得很亲切，看到在西安的人也会很亲切，尽管一直没有什么念想待在西安的。
大好周末啊，我就哀叹下，不会经常的，恩。。。
还有上面的走走溜溜是有在认真想的，去看我一直想看的人啊~~~ 大概会花一年的时间好好溜完也许。
你们也可以先报名让我去排入计划的，哇哈哈~~
猫猫我想你
很想很想的想
想了很久的想
想得有点难过的想
想你怎么样了，想你还会不会想我们
想你会不会上图网看看我们，想你会不会看到Q上我发消息说我很想你
想你也许只是想像你想做的那样放开网络，就那么干干脆脆的了
还想着以后去四川溜达，却不知道去了能看到你不，怕找都找不见
想如果你要嫁人了，我一定要去参加，远远看着希望你幸福
想如果你还能放肆单身着，就要去找你一块放肆
想你如果不开心也不要找不到人说话，我会心疼
想你工作应该顺利好多，同事也没那么难相处了吧
猫猫，我想你了，这一年断断续续地会想起你
这里你不一定会看到，看得到看不到也没什么关系了，只是我想你了
猫猫，如果你也想我了，就来看看我吧。
猫猫，我很想你
22.&.0617.&.0505.&.Birthday.
今年的农历生日，6月16日，很凑巧，跟新历生日凑在了一起。
对头，我的农历生日是端午，五月初五。新历生日是6月17日。
22年来过的都是农历，离家在外以来每年接到的第一声生日快乐也是在端午来自老妈老早的电话。
要生日快乐要礼物也是在农历要，新历则是自己拿来当做告别上个年龄的日子。好吧也有想把青葱拖得晚一点的想法……
^^^^^^^^^^
待……
放假归来第一天加班啊加班~ 确实还没完全整理好要写的。
只是赶在17号未结束发一下。
zzzzzzzzzzzzzzz
以及，自己也要说一声。
暴暴。生日快乐~~~
zzzzzzzzzzzzzzz
0621稍微更一下……今儿拍的。笨浅送来的一大箱方便面盒装的……兔斯基 
看得出是兔斯基……恩
还是上面的兔斯基，囚犯。口太小，3100进的去，G3进不去……zzzz
我不用胶带……只是看这兔子顺眼
两个笔座……YD而WS的兔斯基……
全家福……
呃……漏了个烟灰缸的……鉴于目前我不抽烟就不露面了吧~~
从何说起 – 陈奕迅
ennnn……下次去KTV我要点这首……o(>_<)o
最近听顺的歌突然比去年一整年的还多~ seiseisei~~~~~
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
从何说起 - 陈奕迅
作词：林夕
如梦令 从何处说起
梦一般剧情凭谁在推移
缘份在偷袭 时间在追逼
那些美好的瞬间 得来不易
在感情还能够感人的时代
为甚么有情人 还在颠沛流离
谁辜负过自己 说不上可惜
谁被世道放逐身不由己
谁曾朝不保夕 才为幸福而卖力
才舍得面对镜子 说我可以
月光光 从何处唱起
那圆缺阴晴如何不服气
际遇不讲理 命运没协议
只有从爱人怀抱寻找真理
在感情还能够感人的时代
为甚么有情人 还在颠沛流离
谁辜负过自己 说不上可惜
谁被世道放逐身不由己
谁曾朝不保夕 才会死心不息
才舍得万死不此 说我可以
谁辜负过自己 说不上可惜
谁被世道放逐身不由己
谁曾朝不保夕 才会死心不息
难题再不成问题 说我可以
鸿爪踏雪泥
还是来得及
对重遇的人说
原来你也在这里
对于孕妇的尊重
引：坐公车回来的路上，在位子上发呆上了，上来了位孕妇，等她走过我身边才反应过来起来让座。对于我没看到孕妇就立马反应过来也惭愧，在此警惕和反省下。
声明：本文纯属个人观点。
再声明：我不是多善良和爱心广泛的人，路上看到残疾的可怜的乞讨无论男女老少也只是瞟一眼过去，有投钱的想法也只会对那些有付出努力的人。我仅是尊重所有值得尊重的女性，尤其是母亲，也希望和祝福每位母亲能少受点苦多些幸福快乐。
为什么说尊重孕妇，而不是母亲，或者说女性：我认为每一位孕妇都是值得尊重的，忍受着怀孕的痛苦，带来了新的生命；而母亲，并不是所有母亲都是好母亲，也不乏毫无道德的母亲，但即使是这样的母亲在怀孕期间也一样遭受着折磨，一样孕育着生命，所以至少所有在怀孕期间的母亲都是伟大而美好的，不管她是否乐于接受肚子里的生命。再现实一点，欺诈的也不乏是母亲，谁能知道真假，所以我放不了那么多感情。
意识到孕妇的伟大和脆弱，则只是这两年的事。两年前大堂姐怀孕了，过年回家的时候没有注意还是像以前一样玩闹，过了几天她因为一些原因流产了。我吓到了，虽然后来家里人说不是我的关系，但无法逃脱愧疚，流产的前几天我玩闹地拍了她的屁股，明明伯母有嘱咐我她怀孕了要轻手轻脚的，怀孕的女人身体是脆弱的，不能保证我的动手动脚完全没有带来影响。第二件事是同学的同事，怀孕期间按照正常的产假休息，科技公司也无法避免中间有几个月都是天天在一堆电脑里，小孩出来了有点问题。听了有点难受，一点难受这个小生命要在人生经历更多波折，更多的是难受这位母亲会难过，会在她当母亲的日子里为不完美的小孩付出更多操劳。
如果以后身边的朋友怀孕了，我会劝告和希望她们至少休够一年而不是几个月可怜巴巴的产假，让自己轻松点，也离电脑远一点，减少一些宝宝和自己的风险，也好好享受怀孕的幸福。
再强大的人都有脆弱的部分，而女性天生较为柔弱，不管是身体还是内心，绝大多数的女性都需要好好照顾细心保护。我对于女性（我认为值得的）的尊重喜爱包容疼惜，都缘于我妈，一位勤劳善良温柔也有点唠叨的普通农村妇女，为她的儿女付出相当相当多，多到换做是我连1/2都做不到。
最后，没有要呼吁为孕妇做多少事或者贡献多少，只是希望，在你碰到一位孕妇的时候，，让个坐帮下忙都是举手之劳，不会少你的肉掉你多少汗的。
反省：我的不求甚解
反省的触发点：我对IE Layout的不求甚解。
不求甚解的精神一直在追随着我，总是凭着经验去处理，或者去尝试一些压根不知原理的方法，懒得追究到底本质是什么，让自己一直去撞，嚣张地想着时间大把着呢，就算知道产生诸多问题的源头都是同一个也照样无视。
上面这段，是从我一直以来对IE Layout的态度里总结出来的。我知道有这玩意，我看过相关的文章，我知道IE下这玩意影响很大，但说穿了我只知道去回避和一个zoom:1;。做东西的时候，IE下实在不行了，来个hack吧，我用过的hack很有可能很多都是源于layout，一一被我规避了，也想过说等后期再修整最后也都不了了之了。
拖沓一事：
“去年回家重新办身份证，十几天的时间硬是让我拖到最后两天才去办，最后不得不先搞个临时身份证还是在上车的前一刻才拿到，再让家里人把正式的给我寄过来。”
老妈念叨说我要是一回家就去办早弄好也不至于如此匆忙还要另外寄，我说不是最后稳稳当当弄好了么。阿盖很无奈地对我说你这拖沓的性格，我听了笑笑暗想我就这样这是我特色啊。
认真地想，我在面对其他事情的时候也是抱着上面不求甚解这样的想法去处理，大事小事都容易走向拖沓的方向。我觉得我还年轻，至少还有三年五载可以去消耗，不管是工作还是生活都这么以为着。碰到难题了，那就船到桥头自然直把，脑袋里的终极招数是此处不留爷自由留爷处……还好目前还不至于用这招，还好我还有点好胜和不服输的心理在不让自己轻易夹了尾巴逃。
写这些，不是说我今天反省了就会不再这样，那太难，我也不会把自己搞那么累。只是作为一个记录，一个总结。我会慢慢跟着现实走，需改则改，不是那么强硬要改那就继续保持本人特色。
