准确来说，到现在还不能完全理解那些近乎自虐的行为。但正如他人不能理解我这种近乎自闭的宅男。也许是选择一种让自己最轻松熟悉的方式罢了。尽管疲惫，脸上却一直挂着笑容。有时候，似乎连疼痛都是一种幸福的折磨。

10日早晨6点起床，集合后9点半去到了海边大梅沙，以那作起点正式出发，沿途山野没有补给站，在背包已准备了一天的饮用水与干粮。所谓清明时节雨纷纷起程时开始下起蒙蒙细雨，天气不如理想能见度也较底，既来之则安之我们继续走下去。

走了约两小时一直是上坡路，小腿开始有点感觉了。身体热热的，但雨水却越下越大了，没有带雨具，我的中级防风衣快抵挡不住了，开始渗透雨水。我的登山鞋是透气式的早就开始进水了，下面湿淋淋的感觉有点难受。

走了近4小时，到达了山腰的高度，山上开始有雾气，温度有所下降，能见度大约3米。按照刚到的这段路程统计了一下速度，基本上2.7公里一小时，晕死了比预期的中慢很多，可能也因为是上坡的关系吧，后半段大家都热身够了步伐开始越来越快。

到了中午时候，我们走到了华侨城，茶溪谷后门，大伙在那里开始充饥，我也换上的干的衣服，换了袜子拿两个袋把脚裹住，干爽舒服哈~。大伙准备走时发现Gcun不见了，原来那家伙跑去架炉煮牛肉面了，在野外这杀伤力可非同凡响啊，忍不住吃了一碗热乎乎的，味道实在太棒了，平时完全感觉不到。

下午雨开始停了，雾气也渐渐散去，我们开始绕另一边开始下山了，看着绿油油的山谷，清新的空气扑鼻而来，感觉很舒服疲倦早已一扫而光。

晚上7：30，听到了海浪声，到达了大梅沙海滩我们的终点，旅程结束，但感觉意犹未尽。总体40公里徒步感觉还是不错，体能也超出了预期。结束后团队聚餐，晚上12点到家，身体虽然很疲倦，但心情很舒畅，所有压力都已被释放,，期待下次的户外活动^_^。

【会议目的】
前端开发在研发流程中与其他岗位协作效率的提升，研发流程、协同规范、有效沟通。（ppt分享及会议主持：ivanehwang）

【会议内容】
一、 提升优化满意度（ppt分享：superliu）
PPT主要内容为不断提升用户对我们的满意度而分析总结在工作当中可能遇到的问题和解决方案，主要讲述提高工作效率，如何与产品、开发等相关人员协做及沟通相关技巧。

二、 项目工作量与进度
交互设计师，视觉设计师，产品经理前期占用太多时间，到最后留给你完成开发的时间已经很少了……
1) 兼做PM(no time)
2) 砍需求（功能分批）
3) 预留风险时间
4) 功能实现变更
5) 模块化 (公用,减少重复劳动)
6) 向上沟通
7) 投入度，归属感()
8) 加班 (不建议)
总结：这里大家比较一致，就是首先要保证项目按时完成。如果后面的开发时间因为“设计阶段过长，没有按时交付设计稿”而不够，哪么在不能加人，加时间的情况下， 就只能对当前任务进行拆分，把重要的、紧急的先行完成，别的再安排时间上线。这里比较反对直接说YES或NO的作法，YES的话，就是自己加班完成，但这 样质量，及以后的工作效率得不到保证。NO的话，则显的一点职业素质就没有了。

三、 开发联调问题
页面完成后，产品经理和视觉设计师都已经确认，但到了下游开发时却被打回说页面结构不符合开发的要求……
1) 前期沟通（在设计上）
2) 提升重构人员的专业上水平（为下游预留接口）
3) 数据推动改版（先完成进度）
4) 规范的制定，公用库（Bug list）
5) 浏览器差异化
6) 拥抱变化
7) 过程与结果（管理上）
8) 规范与培训（管理上）
总结：沟通一直大家都在说很重要，这个因为前期沟通不够而产生问题，因为前期沟通到位而避免后期问题大家都说了不少案例。这里大家也深入分析，在不同公司的大环 境下沟通的情况也不一样，如果是领导比较强势，哪么可能比较倒霉，可能无法有效沟通。项目的成熟度也有关系，比如不成熟、前景不太明朗的项目可能就会总是 改来改去，这时如果只是一味接需求来做就比较被动，要在前期设计阶段进入沟通，这样后面才压力轻点。

四、 其它问题
或许您也有自己的苦衷，提出来，让大家一起讨论解决方法……
1) 前期沟通 (重要:在设计评审会上)
2) 提升重构人员的水平 (预留接口,方便下游)
3) 数据推动改版 (重要:先完成进度,雪中送炭,锦上添花)
4) 新的功能引发老功能的问题(推倒重来、单元测试、模块化)
5) 机动团队backup VS 人员空置
6) 模板化企业站 VS 扩展性（模板版本更新、稳定性为前提）
总结：流程建设这一块大家主要是为了保证工作有序可控，把风险性降低。这一块的流程建设中的风险、敏捷、成本是互相牵制的，在人力成本迟迟得不到添加的情况下， 哪么敏捷、风险性就会增加。降低风险性这里目前大家尝试的写文档、人员交叉等建设目前来说因为项目进度（敏捷性）的压力都进行不太顺利。最后因为大家讨论并行开发又引入了模块化的话题，这里大家主要分享了对代码根据作用域进行拆分，然后再进行组合的一个思路和实践，不过对于细节大家还有些 分歧。

Web标准化交流会3月报名过百，国内领先互联网企业前端开发团队悉数加盟。据来自W3CTech的相关人员介绍，本月交流会主题为：前端开发在研发流程中与其他岗位协作效率的提升；论题一经提出及得到了业内的众多响应。互联网是一个新型行业，而前端开发这个概念也在国内方兴未艾；抛弃片面强调前端思想，将Web标准化应用整个开发过程中，是所有互联网企业削减技术成本的有效手段。

从刀耕火种的混杂模式到日新月异的集约型开发，前端开发在中国走过了从无到有的阶段，Web标准化进行不仅仅影响到了浏览器端的技术领域，伴随微格式的流行，万维网标准化体系也逐渐渗透到数据层开发和内容发布等领域，成为了一项系统工程；从不理解到了解，从了解到配合，本月W3CTech将邀请所有与互联网有关的IT人士，共同探讨标准化Web协作开发的标准之路。

本次交流互动将于3月27日在四个城市同时开始，北京站、深圳站由腾讯公司提供场地，广州站由新浪提供场地上海站将在携程网进行，W3CTech也希望更多有识之士参与讨论，努力推进国内web标准化进程。

1. 对符合web标准的网站重构有丰富经验，有成功案例；
2. 精通结构化语言xhtml、xml与解释性语言css；
3. 精通图像处理软件与网页编辑软件；
4. 对业界最新的页面实现有浓厚的兴趣和深入的见解；
5. 逻辑分析能力强，善于沟通，较强的学习能力；
6. 熟悉对象模型与脚本语言，有前台开发经验者优先考虑；

招聘截至时间：2010年5月
如果你想应聘该职位，请发简历到lqd2001@gmail.com，我们会尽快联系您。

围绕着定位列出的种种问题，对某些情况只是作出了分析而暂时没有找到有解决方案，但既然知道问题所在，我们可以尽可能的采取其它措施避免这现象。

1. position:relative;属性值导致overflow:hidden;失效。

   问题：在IE6/7中子级设置position:relative;属性值后，导致父级的overflow:hidden;失效。Demo1
   

   分析：与定位的层级关系有关，IE6/7解析为内容已经跳出文档流，以致父级误以为没有包含内容。

   解决方案：
   对于IE6可以为父级添加定位属性纠正问题，但IE7依然无效。

2. overflow充当了position:relative的角色

   问题：在IE6或IE quirks模式中设定overflow:auto/hidden/scroll属性值后，元素显示效果相当于position:relative的相对定位效果。
   Demo2
   

   分析：在怪异模式与标准模式下的页面对CSS的解析会有一定的差异甚至是扭曲了其属性的作用，对这现象暂时还没有冲破的能力，也只能记录与回避了。

3. 没有实渲染导致绝对定位的错误

   问题：在IE6中，子级元素绝对定位于父级元素时，当动态改变父级宽高时，子级位置没有发生变化。Demo3
   

   分析：估计是动态改变父级高度时，IE6并没有实时对浏览器渲染。暂时没有CSS能解决这问题，但可尝试加载内容后，使用JS对被定位的父级（定位参照物）再次刷新，解决问题。

4. IE6中position:relative;属性值无效

   问题：在IE6及以下版本，父级元素已设置position:relative;属性值，但子级绝对定位元素没有生效。Demo4
   

   分析：原因在于父级元素没有触发haslayout（相关资料请搜索On having layout），IE7及以上的高级浏览器则不存在这问题。

   解决方案：
   在父级元素中添加让其触发haslayout的CSS属性值。

5. 奇数引起定位的1pxBUG

   问题：在IE6及以下版本，父级元素宽度高度为奇数时，子级元素绝对定位于(right:0;bottom:0;)，会出现往内偏移1px的错误。Demo5
   

   分析：其真正原因还得问IE6的开发者了。但从例子中可以观察到左上角的子级元素显示正常，其原因为“盒子”拉伸扩展为上至下左至右，估计于此以至靠左边或顶部的位置不会发生移动的变化。

1. 性能差异

   【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

   【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

2. 兼容性差异

   兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

   【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，如下例Demo1：
   
   

   【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，如下例Demo2：
   
   

总结：

1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可，如下例Demo3：

   
   
   

对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。

问题在于PNG8图片本身，以下l例子模拟了当时情况，当使用IE6来浏览的会发现第二行的4个图标隐形了。Demo

原来下面的4个图标被调了90%的”Alpha透明度”（FW在导出PNG8的时能保留“Alpha透明度”PS则做不了这一点）。

而被Alpha半透明的图标在一般浏览软件或FF、Chrome、Safari、Opera、IE7以上浏览器都可以正常浏览，唯独是IE6。

其实也有办法让IE6支持PNG8的”Alpha透明度”，方法与PNG32的IE滤镜一样。Demo

从来上面结果得知原来是 png8“Alpha透明度”闯的祸。而且这次PNG8不同于png32的是，不支持png半透明的浏览器(如ie6)会自动降级到全透明(像gif那样)，而不是像png32那样会有一个灰色的背景。

以导航为例，下面的代码完全符合CSS的逻辑，理论上应该是”a:hove的背景图片”结合”a.nav_1的背景定位” 而得出预想的结果，但IE6却异常地只显示背景图片而没有对上背景坐标Demo（请使用IE6与IE6以上浏览器作对比）。

*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*导航*/
#nav p{ position:absolute; left:0; bottom:0; width:100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
/*导航经过状态: IE6及以下浏览器不兼容，其它浏览器正常*/
#nav a.nav_1{width:80px;background-position:0 -213px;}
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6{width:162px;background-position:-583px -213px;}


之前我使用的解决方案是，再经过状态添加对应的选择符。这方法感觉代码显得比较臃肿，而对于代码洁癖的我是比较难接受的Demo。

/*导航经过状态: 之前的解决方案*/
#nav a.nav_1:hover,
#nav a.nav_1{width:90px;background-position:0 -211px;}
#nav a.nav_2:hover,
#nav a.nav_2{width:86px;background-position:-80px -213px;}
#nav a.nav_3:hover,
#nav a.nav_3{width:227px;background-position:-166px -213px;}
#nav a.nav_4:hover,
#nav a.nav_4{width:92px;background-position:-393px -213px;}
#nav a.nav_5:hover,
#nav a.nav_5{width:98px;background-position:-485px -213px;}
#nav a.nav_6:hover,
#nav a.nav_6{width:162px;background-position:-583px -213px;}


理论上”a.nav_1″选择符比”a:hover”要高，但我尝试添加!important时测试发现IE6却显示正常Demo。

而测试其它浏览器也无副作用，这次似乎与haslayout无关了，但其产生原因与结果也却让人百思不得其解

/*导航经过状态： 现在的解决方案*/
#nav a.nav_1{width:80px;background-position:0 -211px!important;}
#nav a.nav_2{width:86px;background-position:-80px -213px!important;}
#nav a.nav_3{width:227px;background-position:-166px -213px!important;}
#nav a.nav_4{width:92px;background-position:-393px -213px!important;}
#nav a.nav_5{width:98px;background-position:-485px -213px!important;}
#nav a.nav_6{width:162px;background-position:-514px -213px!important;}


ytzong 提供的解决方法很不错赞～, 看来不使用背景缩写还是有它的好处。IE6在背景相加的逻辑上的确是有问题，同样测试过border属性则不存在这问题Demo。

*{margin:0;padding:0;}
.header{ position:relative; width:745px; height:225px; background:url(bg.jpg) no-repeat;}
/*导航*/
#nav p{ position:absolute; left:0; top:180px; width:100%;}
#nav p a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav p a:hover{background-image:url(bg.jpg); background-repeat:no-repeat;}
/*导航经过状态: IE6及以下浏览器不兼容，其它浏览器正常*/
#nav p a.nav_1{width:80px;background-position:0 -213px;}
#nav p a.nav_2{width:86px;background-position:-80px -213px;}
#nav p a.nav_3{width:227px;background-position:-166px -213px;}
#nav p a.nav_4{width:92px;background-position:-393px -213px;}
#nav p a.nav_5{width:98px;background-position:-485px -213px;}
#nav p a.nav_6{width:162px;background-position:-583px -213px;}


不知道还没有更好的方法呢～

<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

添加以上代码后，在IE8中显示的效果如下：

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿，在smashingmagazine提供的代码似乎更简洁。
Demo：http://blog.gulu77.com/demo/200908/html5_demo3.html

<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素，如下例：

header, footer, nav, section, article {
display:block;
}

测试结果为当不适当地使用float:left/right; width:100%; display:none;CSS属性值及相应的HTML结构做组合，会引发在IE中的七种怪异问题，此问题在中文及英文字体均会出现。详细如下例：

阅读约定：
cont1是指：<p class=”cont1″>ABCDEFG</p>
cont2是指：<p class=”cont2″>1234567</p>

一、相等长度的文本消失

在IE6中，cont1与cont2字符长度相同时，文本会消失，且容易引起浏览器IE6崩溃。

但改变浏览器窗口尺寸时内容会再次显示。

注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题

DEMO：http://blog.gulu77.com/demo/200908/float/a1.html

二、当浏览器宽度少于内容宽度文本会消失

在IE6中，当浏览器宽度少于内容宽度文本会消失，且容易引起浏览器崩溃。
但改变浏览器窗口尺寸时内容会再次显示。

注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题

DEMO：http://blog.gulu77.com/demo/200908/float/a2.html

三、相等长度文本重影

在IE6中，cont2比cont1多出一个字符时，内容会被重映为相等长度的文本，且容易引起浏览器IE6崩溃。

DEMO：http://blog.gulu77.com/demo/200908/float/b1.html

四、当浏览器宽度少于内容宽度文本会重影

在IE6中，cont2比cont1多出一个字符时,且浏览器宽度拉伸至小于内容宽度文本会完全重影。

此问题与第三个对比在于一个不需要拉伸，一个需要拉伸。

DEMO：http://blog.gulu77.com/demo/200908/float/b2.html

五、文本的倒序重影

在IE6中，cont2比cont1多出两个字符或以上时文本会被倒序重影，且容易引起浏览器IE6崩溃。

规律为:重影字符数 = cont1的字符数 + 1个字符数

DEMO：http://blog.gulu77.com/demo/200908/float/c1.html

六、内联元素引起的文本重影

在IE6中，浮动元素之间有不含内容的内联元素的标签（指内联标签或CSS模拟的内联标签）后会引起文本重影。

规律为:重影字符数 = 内联元素数量 * 2字符数 – 1个字符数

DEMO：http://blog.gulu77.com/demo/200908/float/d1.html

七、内联元素引起的IE6/7文本重影与消失

与第六的《内联元素引起的文本重影》类似，但在cont2后面添加了一个内联元素后会导致IE7也出现重影BUG。
而内联元素相加超出cont2字符数时，IE7表现正常，IE6则表现为消失。

规律为:重影字符数 = <span>数量 * 2字符数 – 1个字符数

DEMO：http://blog.gulu77.com/demo/200908/float/e1.html

而内联元素相加超出cont2字符数时，IE7表现正常，IE6则表现为消失。

注意：测试了IE Collection的：6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题

规律为:重影字符数 = <span>数量 * 2字符数 – 1个字符数

DEMO：http://blog.gulu77.com/demo/200908/float/e2.html

感激Mr.Q 提供的解决方法，很不错～ 给有问题的元素加上position:relative能一一对应解决问题。

得知这信息让我想起在08年Web Rebuild聚会上分享的一篇文章《推进浏览器的更新》，当时并没有找到更好的借口让企业花更多的成本实现非牟利的想法，以至刻录在硬盘中迟迟没有发出。而更没有预想到的是Qzone实现了这想法，并不排除会逐渐应用到各业务中，这是个好消息哈~ ！我无论是作为开发者或用户的身份我都极力支持这行为，也希望有更多的网站能仿效！

以下为《推动浏览器的更新》的部份内容：

（不太相关的部分省略500字哈~）

近年来，互联网日益普及随时代变迁信息技术飞速发展，各浏览器频频更新，衍生出多种版本，甚至还没来得急普及就已经有更新的版本出现!我们熟悉的WEB开发语言，在大概10年的时间里有着不同程度的更新，现在已出现CSS3.0、HTML5.0、XHTML2.0，而新版本的语言只有新版本的浏览器所以支持。

浏览器及开发语言的快速更新，并非所有用户能紧贴跟随。因此导致用户对浏览器版本使用不集中，开发人员不得不考虑各浏览器新旧版本的兼容性，从而放弃新开发语言的应用。

为何推动浏览器更新

1. 如果我们能让用户更快地更新浏览器，从而收缩浏览器版本的跨越性，能减少对浏览器新旧版本处理时间。
2. 新的WEB标准语言及规则难以普及应用，归根于新版本浏览器用户占有量少，大部分用户使用的浏览器版本低，无法解析新的WEB语言，从而新技术难以推广应用。
3. 用户角度：经过不断更新优化的新版本浏览器，将减少浏览器对系统资源的占用率，安全性更高，浏览器运行更稳定，从而减少外来的阻碍因素，让用户能顺利的浏览器你的网站。
4. 开发者角度：在开发当中不断地为IE6做出兼容性处理，无疑增加了开发者的工作量，增加了开发成本。新版浏览器迟迟未能普及无疑是拖慢了WEB技术的发展步伐。

我们一直，把所有浏览器呈现一至的界面效果给用户，无论他在使用IE5或FF3。对于使用高版本浏览器的用户感到不公平，为何使用高版本的浏览器却得不到应有的体验，升级的意义何在？

如何推动浏览器更新

对用户而言，他们需要一个升级理由，在无损页面性能、视觉效果、网站的可用性情况下，为更高级版本的浏览器提供更好的支持发挥应有的特点。培养我们的用户尝试让他们了解使用更高版本的浏览器会有更好的综合体验。

根源：

1. IE6存在的安全漏洞已成为黑客恶意攻击的目标，导致现时流氓软件的迅速发展。
2. 相对于IE8在执行效率中IE6明显的要逊色，而且对开发语言的兼容性差经常会遇到浏览器崩溃。
3. 在开发当中不断地为IE6做出兼容性处理，无疑增加了开发者的工作量，增加了开发成本。
4. 对升级语言无法解析，为呈现效果一致性新版本浏览器迫不得已向IE6对齐因此抑制了W3C标准的推广。

Internet Explorer 6为何还能在市场上立足，最终也归于在用户市场的占有较高的比率，导致Internet Explorer 6迟迟未能退役。作为一名从事互联网的职业的人员，无论从来用户体验、开发者或企业的角度，希望您能带动起浏览器的更新热潮。

参与方式：

鉴于此请支浏览器的更新，在您博客中插入推广代码后当用户使用Internet Explorer 6 或更旧版本访问你博客时，浏览器会弹出一次带开关的 更新浏览器版本提示层。如下图：

推广代码：

默认样式
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.webrebuild.org/webrebuild_api.js"></script>
<![endif]-->

自定义样式
<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.webrebuild.org/webrebuild_api_definition.js"></script>
<![endif]-->

1. png32的图片上在IE6有兼容性问题，原本的透明显示的背景将会失效。
2. 在问题1的基础上，针对IE6采用了CSS滤镜让其透明，但图片不能应用背景坐标定位的方式只能单张使用，这做法不利于带宽流量和请求链接数之余也不利样式的管理
3. 在问题2的基础上，意味着要把png图片单张切割，并单张应用CSS滤镜

针对以上问题重构师的解决办法如下：

把背景图片如常的合并，利用相似于背景坐标的方式调用局部图片位置。最大区别在于分别定义了两个无意义的标签。

• 一个标签作为模拟背景的载体标签：定义一个作为载体的标签，针对IE6以滤镜的形式导入图片，宽高与背景一致。
• 另一个标签作为截取背景局部位置的截取标签：定义此标签宽高与预想调用背景局部位置大小一致，并隐藏其溢出的部份。
• 最后计算出预想调用背景局部位置的坐标，定义在载体标签中。

HTML结构如下：
<div title="截取">
<div title="载体"></div>
</div>

为了清晰的体现HTML结构，给标签添加了title属性，加以说明。本文实例：DEMO

实现步骤(分3步)：

1. 载体标签：定义一个作为载体的标签，针对IE6以滤镜的形式导入图片，宽高与背景一致。
   (注意：滤镜图片路径相对于页面，而不是CSS的位置) 
   <div title="载体" style="width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>
   
2. 截取标签：定义此标签宽高与预想调用背景局部位置大小一致，并隐藏其溢出的部份。
   <div title="截取" style=" overflow:hidden; width:120px; height:120px;"></div>
   
3. 最后计算出预想调用背景局部位置的坐标，定义在载体标签中。
   (背景局部位置坐标的调整可用margin或position控制。下面以”I”为例) 
   margin
   <div title="载体" style="margin:-80px 0 0 -120px;width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>
   position
   <div title="载体" style="position:absloute;top:-80px;left:120px;width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>
   

完成后的代码
<div title="截取" style="width:120px;height:120px;overflow:hidden;">
<div title="载体" style="margin:-80px 0 0 -140px;width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div></div>
在FF与IE7等浏览器处理方式与IE6一致，在这问题曾经做过考虑是真的要为了IE6而IE6吗？因为其它高版本浏览器都支持png32以上图片，大可用正常的方式导入背景及调用坐标。但考虑到最终目的及其可维护性，因而不去做高版本浏览器的常规处理方式。
本文转载自:ISD Webteam

从测试结果得知Opera及FF中的,浏览器窗口宽度少于内容宽度时,内容块以body 左对齐。这里有一个突破点是在于把body转变为具有内容板块的特性。

按照CSS的解析，个人认为在Opera及FF中所显示的为正确效果,在IE5.5至IE7 、Safari、chrome中否则为错误的解析。但错误的解析正是我们所需要的，因为此能避免有内容与背景会有错位的现象。

解决方案

下面方案针对Opera及FF,目的令背景图片向body左对齐

1. 为<body>定义display:table;及width:100%;属性。A2_Demo
2. 为<body>定义display:inline-table;及width:100%;属性。A3_Demo

两种的方案缺点

1. body根据页面内容高度而撑高，当内容不足一屏幕高度时，body将来不显示余下高度的背景。A4_Demo

   为此需要给<html>及<body>定义height:100%;属性值,来解决问题。A5_Demo

解决方案

1. 删除<html>定义的背景(指背景颜色及图片,建议使用)B2_Demo
2. 为<body>定义display:table;及width:100%;属性。B3_Demo
3. 为<body>定义display:inline-table及width:100%属性。B4_Demo

第2跟第3的方案缺点

1. 在IE7中此问题暂时无法解决，因为IE7不支持display:table;属性值
2. <body>定义display:table;属性值后，页面根据内容高度而撑高，当内容不足一屏幕高度时，body将来不显示余下高度的背景。A4_Demo

   为此需要给<html>及<body>定义height:100%;属性值。A5_Demo

解决方案

1. 为<body>定义display:table;及width:100%;属性值。C2_Demo
2. 为<body>定义display:inline-table;及width:100%;属性值。C3_Demo
3. 此方案针对IE6,建议在被应用或承继100%宽度的元素内,定义一个固定宽度的元素。C4_Demo

第1第2两种的方案缺点

• 在IE5~IE7中此问题暂时无法解决，因为IE5~IE7不支持display:table;属性值
• body根据页面内容高度而撑高，当内容不足一屏幕高度时，body将来不显示余下高度的背景。A4_Demo

  为此需要给<html>及<body>定义height:100%;属性值。A5_Demo

总结

第3种方案只针对IE6,其它浏览器或版本不生效,所以要结合第1或第2种方案来解决兼容性问题。C5_Demo
而在IE7中暂时无法解决。

解决方案

1. 删除定义在<img/>父级的overflow:hidden;属性值D2_Demo
2. 在<img>父级定义与其相同的宽度。D3_Demo

图片优化

1. 对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果，而且能为你节省10%-30%的文件体积。
2. Photoshop相比起Fireworks，导出同等质量的PNG图片，体积会稍大。而Fireworks虽然做了相应压缩优化，但还没达到最优秀的压缩。
3. 我所知的设计软件，对于PNG图片的处理都没做到最优秀的压缩，图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的二次压缩。
4. 图片体积及尺寸方面，建议体积保持在100K以内(较为符合国情最佳请求SIZE)，size为800px(最佳尺寸)。(从某权威人事中得知，具体无从考证)

CSS Sprites图片切割术

1. CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。
2. 不建议CSS Sprites图片中保持一定的间距，因为文件size增大而增加文件体积。
3. CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。
4. size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。Demo
5. 在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。Demo
6. 在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。Demo
7. 图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。Demo
8. 区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并。
9. 黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

相关的图像优化工具

网上流传的优化工具繁多常见的如：
ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。

我喜欢使用PNGOut，安装使用也非常简单，有30天的免费试用版，下载地址www.ardfry.com/pngoutwin/
PNGOUTWin：是PNG优化器，创造更小的图象文件和加速您的网站，更好地减少带宽的流量及费用的开销。您能转换和压缩TIFF、GIF、BMP和其他格式的PNG，或者优化您现有的PNG文件。

以下是安装及使用的一些载图

以上内容为个人总结，不排除有错漏

• IE6支持PNG二进透明:

  IE6是支持PNG二进透明的（即要么全透明，要么不透明），但不支持png的 alpha 透明度（即半透明）。而我们一直要解决的是让IE6支持PNG8或PNG32的 alpha 透明度问题。而对于非动画的GIF建议你使用PNG8，因为体积会更小
  
  测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/

1. AlphaImageLoader 筛选器

   • 使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
   • 官方原文：http://support.microsoft.com/kb/294714/zh-cn go
   • 测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2. PNG Transparency in IE

   • 使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。
   • 官方原文：http://codingforums.com/archive/index.php?t-80555.html go
   • 测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

3. IE PNG Fix v1.0 / 2.0 Alpha 2

   • 使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
   • 官方原文：http://www.twinhelix.com/css/iepngfix/ go
   • 测试实例：http://blog.gulu77.com/demo/200809/test_iepngfix/

4. IE7/IE8 JavaScript library

   • 使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
   • 官方原文：http://code.google.com/p/ie7-js/ go
   • 测试实例：http://blog.gulu77.com/demo/200809/test_ie7-js/

5. Image Optimization, Part 5: AlphaImageLoader

   • 使用简介：以XML标签作为额外的载体在IE中实现真彩色的PNG透明图片，它能解决： alpha 透明度、 性能和背景重复问题。
   • 官方原文：http://www.yuiblog.com/blog/2008/12/08/imageopt-5/ go
   • 测试实例1_优化前：http://gulu77.com/AlphaImageLoaderTest/untitled1.html
   • 测试实例2_优化后：http://gulu77.com/AlphaImageLoaderTest/untitled2.html

全部实例打包下载：http://blog.gulu77.com/demo/200809/test_png.rar

引起这问题原因是，在同一个选择符中同时应用了 border 跟 overflow : auto | hidden | scroll 而产生，注意Firebug检查层位置偏移问题并不会影响内容的样式表现。这只是等于或低于Firebug1.05的BUG，Firebug1.05以上版本已修复此问题（这意味着你要使用FF3）。

demo:http://blog.gulu77.com/demo/200808/firebug.html