Gulu77 -- IT技术博客大学习 -- 共学习共进步！

• Java环境变量设置

记录一下java环境变量设置新手会遇到的问题，以及展示从配置到运行JAVA HelloWorld的例子。

• Firefox滚动残影

Firefox滚动残影这文章放在草稿箱有一阵子了，之前的3系列都有这BUG，当正想发表这文章的时候，alextang和我沟通刚刚升级的FF4已修复此BUG，所以搁置一阵在考虑到这文章还有没有价值，既然写了还是发吧，就当撑撑场面。相信FF3~4版本之间也需要一些时间做过渡，希望对各位还有用。这BUG算是老问题，困扰我很长一段时间，最近做项目又遇上但总算找到办法把它解决了。

• 网络图像优化总结

网络图像优化，总结了我个人接触到的优化方法，这只是优化当中的一小部份，还要更多的需要各位大牛去挖掘了分享，也欢迎大家针对此内容进行交流或拍砖。

• 研发流程中与其他岗位协作效率的提升

最近时间管理上出了点问题,前段时间的举行的交流会现在才放出, 基于super的总结上我再修改了一下。【会议目的】前端开发在研发流程中与其他岗位协作效率的提升，研发流程、协同规范、有效沟通。（ppt分享及会议主持：ivanehwang）【会议内容】一、提升优化满意度（ppt分享：superliu） PPT主要内容为不断提升用户对我们的满意度而分析总结在工作当中可能遇到的问题和解决方案，主要讲述提高工作效率，如何与产品、开发等相关...

• 定位相关的怪异问题

事物绝非十全十美总有强差人意的一面，之前针对浮动分析了其引起文本重影的怪异问题，而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。围绕着定位列出的种种问题，对某些情况只是作出了分析而暂时没有找到有解决方案，但既然知道问题所在，我们可以尽可能的采取其它措施避免这现象。

• border:none;与border:0;的区别

这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，borderl:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。

• IE6中隐形的PNG8图片

在项目中遇到一情况让困扰了半天，同一张PNG8图片为何部份图标在IE6中消失呢？当时一度怀疑是cache或hosts问题反反复复开关浏览器结果依然无效，连番测试终于找到了原因。问题在于PNG8图片本身，以下l例子模拟了当时情况，当使用IE6来浏览的会发现第二行的4个图标隐形了。Demo 原来下面的4个图标被调了90%的”Alpha透明度”（FW在导出PNG8的时能保留“Alpha透明度”PS则做不了这一点）。而被Alpha半透明的图标在一...

• 改善IE6中a与a:hover的背景支持

在IE6中背景属性加a与a:hover两者的伪类结合，在正常逻辑下为何不起作用？测试这问题存在IE6及以下浏览器，这问题我经常遇到在之前一直采用其它方法取而代之，现在找到了另一种解决。以导航为例，下面的代码完全符合CSS的逻辑，理论上应该是”a:hove的背景图片”结合”a.nav_1的背景定位” 而得出预想的结果，但IE6却异常地只显示背景图片而没有对上背景坐标Demo（请使用IE6与IE6以上浏览器作对比）。

• 浮动引起的文本重影

在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题，一般来说这类问题在IE6中表现的比较多，但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题，但此时的页面却是没有任何注释～，持续地测试分析问题变得越来越有趣了

• 浏览器对居中的背景图片的兼容性

在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时，居中的背景图片转向以body左对齐。而在Opera及FF中,居中的背景图片依然以缩小的窗口宽度居中对齐，当浏览器窗口宽度少于内容宽度时，拖动横行滚动条就能察觉到页面内容与背景会有错位的现象。

• 缩小窗口<body>背景被裁掉

此现状出现在IE7、FF、Opera、Chrome、Safari中，当浏览器窗口少于内容，拖动窗口横向滚动条时能发现定义在的背景会被裁掉，似乎背景只计算了当前窗口的宽度。引起这问题的主要原因是在中定义了背景。在IE6不存在此问题。

• 页面元素的背景及boder被裁掉

在IE5~IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于内容宽度,拖动横向滚动条会发现页面元素的背景及boder被裁掉，主要原因是body子级元素定义了100%宽度或是承继父及的100%宽度（即没有定义宽度）。

• 缩少窗口<img/>被裁掉

在IE7、IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于<img/>宽度时,拖动横向滚动条会发现<img/>被裁掉，主要原因是<img/>父级元素定义了overflow:hidden;属性值。IE6中不存在此问题。

• CSS Sprites图片切割术与图片优化

关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。

• IE6支持PNG透明(alpha通道)的4种方法

想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

• 一张背景实现自适应九宫格

在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，不过在切图方面会比较严禁有1px的不对称就会出问题，请留意下面例子的切割分析。

• IE5至IE7读取不了4095行以后的CSS

这是IE浏览器独有的错误，经过测试IE5至IE8会读取不了CSS文件中4095行以后的样式。又一个IE莫名的错误，为什么读取不了4095行以后的CSS实在令人费解，但其实CSS写到4095行几乎是不可能的事情，所以也不用太在意这BUG 。

• 渐变背景上的内容垂直居中

不同分辩率下的页面内容垂直居中，这问题在某些情况下会比较麻烦，如：内容在不一致的渐变背景之上，让其垂直居中于不固定高的页面，这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋!

• CSS让你的IE浏览器崩溃

严格来说不是光CSS就能令IE浏览器崩溃(crash)，而要配合一定的XHTML架构。到现时为止发现有两种写法的代码分别会令IE6、IE7崩溃，至于原因我尝试寻找过答案但至今还没找到...如你有这方面的认识或更详细的资料很希望你能分享一下！

• 一个标签应用三个背景图片

正确来说这并不算是什么新鲜技术,早在CSS2.0出现伪对象(Pseudo-Elements)时候就已经可以令一个标签应用三个背景图片，只不过是某些低版本浏览器对其支持不完善，而导致这技术在国内几乎无人使用。对于伪对象能轻易地完成三个背景图片的任务，而且玩法灵活多变。