面壁者语

背景图1像素偏差

流放之忆 — Tue, 13 Jul 2010 22:25:26 +0000

DEMO-1：给页面设置960px的纯黑色背景图横向居中，同时内部960px宽的容器设置纯色背景，得出各浏览器下效果如图，从上到下依次为了firefox、chrome、IE 8、IE 8自带IE 7标准模式、IE6

仔细看IE6的左下角可以看到，背景图向右偏了1像素。解决办法么，CSS还没强大到有background-position:center-1px的写法，只好给内容器设置{_position:relative;_left:1px;}向右移一像素。

再进一步，DEMO-2，尝试给两个div设置高度，让浏览器出现滚动条，那么会发现chrome下也会像IE 6一样出现偏移，这时候就需要给chrome写hack。写法可以参考aliued的文章说说CSS Hack 和向后兼容

andriod legend使用小记

流放之忆 — Sun, 27 Jun 2010 18:51:18 +0000

legend入手一个多月了，今天帮人带个desire，试玩了下越发喜欢自己的legend，顺手推荐点平时使用的软件。

1.number save

功能及其简单但是足够实用：打电话的同时可以调出来记录电话。限定录入数字（也就是说这不是个便笺软件，只能记录电话号码），号码可以保存、呼叫、添加至联系人。

2.astro file manage

手机上的瑞士军刀。顾名思义，主功能是SD卡文件管理，但是可以后退到系统目录去查看文件，比如做goldcard时查看系统信息。附带APP管理、SD卡剩余空间查看等。另外有这个不需要装其他APK安装程序了。

另外有网络模块，我甚至某次在公司忘记带数据线用这个的FTP模块去下载公司电脑上的Ubuntu安装ISO……

3.TaskPanel X

Android是多线程，但是目前的程序大多都没有退出功能，于是market上有不少此类专供系统清洁强迫症的同学使用的软件，几番对比后我选择了这个，因为它足够好用并且没有广告。

有忽略列表(ignore-list)、自动关闭列表(killer-list)，待机时会自动杀掉auto-kill列表中的程序；可以设置开机启动此软件。另外附带APP删除功能

4.本地通 places directory

google出品，跟google map结合，查询身边的餐馆银行等信息。

5.shazam

音乐爱好者软件，路边听到喜欢但是不知名的曲子，可以用这个软件录音然后联网查询。

6.支付宝

充话费方便。另外很体贴的设计成退出程序时退出内存，这个需要称赞一下。

另外，系统方面我使用的是由港版RUU提取的自制ROM，主要是删除了一些“不能用”的国外网站的客户端，原因么大家都知道。目前唯一的问题是连不上V马赛克N，不知道是G6的问题还是我这个ROM的问题，同一帐号用desire是OK的。

附带一些教程：

深蓝的系列教程，包含金卡制作、RUU刷机、自制ROM、取ROOT等，比较全。不过取ROOT刷机部分我是看的这一篇。

tips，自制ROM需要删除bin文件夹下所有配置文件，当时卡这里卡了一晚上

Slash个人专辑！

流放之忆 — Tue, 06 Apr 2010 02:51:22 +0000

Slash自己推出来的消息：合法的在线试听http://music.aol.com/new-releases-full-cds/#/2。当然我们有虾米网，专辑页面：http://www.xiami.com/album/374335

顺便，Facebook上看到他说，“Twitter has replaced smoking, now I get it”，有点搞笑，这家伙竟然能用上推来戒烟。

专辑中请到的大牌不少，Ozzy，Dave Grohl，Kid Rock，Iggy Pop，Alice Cooper等等，Slash人缘还是不错的。

详细信息以及下载有人整理出来了，http://37383073.blogbus.com/logs/61576176.html 我是用的下面的威盘。

WIN 7下Internet Explorer Collection替换方案

流放之忆 — Mon, 29 Mar 2010 05:27:42 +0000

搜索来源里经常看到有人搜索Internet Explorer Collection和WIN 7的组合关键词，猜测是有些问题。

Internet Explorer Collection目前版本1.6.0.6，官网称解决了一些WIN7的问题，另外在WIN 7的环境下，IE 7默认不可安装，推荐使用IE 8自带开发者工具的IE 7模式切换。个人装上测试发现，IE 6连地址栏都没有，相当不爽，而且JS一堆报错。

那么就像当初从IETester转向IE Collection一样，换个方法——使用虚拟机搭建真实XP环境，IE下各种调试工具都能使用，会比各种残缺IE方便许多。

我现在使用的是Win7+VMware安装XP+IE 6，国内环境应该大多是各种神奇的旗舰版WIN 7，那么另外的方法是，使用WIN 7的XP Mode。09年WIN 7下的Virtual PC需要CPU虚拟化支持，但是10年3月17日出了个补丁KB977206，可以免除硬件限制直接安装。XP Mode比VMware方案好的一点在于文件共享设置很方便，个人测试文件访问效率也高许多。

XP Mode的下载页面中第三步就是补丁下载。需要注意的是，这个补丁会验证系统正版与否，并且此验证比Media player初次设置时的验证强力许多，经测试传说中的OEM版会被黑屏，想这么玩的就各显神通了……

IE 9的User Agent

流放之忆 — Wed, 24 Mar 2010 15:21:02 +0000

IE官方博客发布文章，公布了IE 9使用的新user agent，与IE 8相比改动：

Mozilla/4.0改为5.0
MSIE8.0改为9.0
Trident/4.0改为5.0

如果没有其他软件增加的内容（比如国内诸多maxthon等使用IE内核的浏览器），那么默认则是Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)。

与IE8相同，IE9也保留兼容模式，使用IE7 Standards Mode，UA为Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)。使用Trident/5.0来区分IE8-Trident/4.0-的兼容模式。

恩，估计到时候Maxthon又会在控制面板里默认设置为兼容模式了。上次IE8下装Maxthoh，看系统默认UA为兼容性试图，而且还红字标注更改有风险。这让俺们按照标准模式写生怕自己网站进入微软兼容性网站列表的前端们十分郁闷。

奇怪的是，IE 9应该只在WIN 7平台上使用，兼容模式的Windows NT竟然也保留了Vista的6.0而不是WIN 7的6.1。另外，IE 8的UA有判断系统是32位还是64位的字符，IE9里没见有相关说明

heading content笔记

流放之忆 — Sun, 21 Mar 2010 07:06:37 +0000

一个页面里应该有几个h1？这个问题从W3C的HTML4.01文档开始就争论到现在。之前就有这个疑问，当时选取了一篇文章只能有一个标题的常规逻辑作为参考。今天又系统看下HTML 5草案里的heading content说明及HTML 4.01的文档，加深理解。

首先，HTML 5规定了heading content和sectioning content两种概念：
heading content包含h1、h2、h3、h4、h5、h6及hgroup；
sectioning content则包含article、aside、nav、section，以及sectioning roots元素blockquote、fieldset、body、td、details、figure

HTML 5草案中部分文档的蹩脚翻译：

sectioning content元素中的第一个heading content元素代表了这个章节的标题。之后的同级或者更高级的标题（暗示）开始新的章节，而低级的标题暗示开始当前章节的子章节；
sectioning content元素总是代笔着在它所属的祖先元素下建立新的子章节，无论此章节所使用的标题等级；
建议明确指定sectioning content的外框元素，来替代在同一个sectioning content元素中使用各级标题来暗示上下文层级关系。
sections可以包含任何等级的标题，但是强烈建议全部使用h1，或者使用适用于当前所在章节等级的标题。

思考：这个强烈建议（authors are strongly encouraged）的目的是什么？

强化sectioning content的DOM层级暗示作用，简化heading content带来的歧义；
避免在低级section中使用高级heading带来的误导
实际应用中h1的尴尬——比如常见的站点logo使用h1标识站点标题，但是在文章内容页需要强调的是文章的标题

W3C给的代码示例：
这种代码在语法上没有任何问题

<body>
<h4>Applesh4>
<p>Apples are fruit.p>
<section> 
    <h2>Tasteh2>
    <p>They taste lovely.p>
        <h6>Sweeth6>
        <p>Red apples are sweeter than green ones.p>
    <h1>Colorh1>
    <p>Apples come in various colors.p>
section>
body>

但是使用如下结构更容易让人理解

<body>
<h1>Applesh1>
<p>Apples are fruit.p>
<section>
    <h2>Tasteh2>
    <p>They taste lovely.p>
    <section>
        <h3>Sweeth3>
        <p>Red apples are sweeter than green ones.p>
    section>
section>
<section> 
    <h2>Colorh2>
    <p>Apples come in various colors.p>
section>
body>

在HTML 5草案中h1-h6部分中介绍，这些元素具有与数字相同的等级，h1为最高，h6为最低。两个相同的元素则具有相同的等级。语法上来讲，h系列标签的等级评判建立在DOM树的层级.同样有两种不同的示例，指出其等级相同：

<body> 
    <h1>Let’s call it a draw(ing surface)h1>
    <h2>Diving inh2>
    <h2>Simple shapesh2>
    <h2>Canvas coordinatesh2>
    <h3>Canvas coordinates diagramh3>
    <h2>Pathsh2>
body>

<body> 
    <h1>Let’s call it a draw(ing surface)h1>
    <section>
        <h1>Diving inh1>
    section>
    <section>
        <h1>Simple shapesh1>
    section>
    <section>
        <h1>Canvas coordinatesh1>
        <section>
            <h1>Canvas coordinates diagramh1>
        section>
    section>
    <section>
        <h1>Pathsh1>
    section>
body>

而在HTML 4.01的文档中，仅仅指出“一些人认为越级使用标题标签不合理，h1,h2,h1可以，h1,h3,h1不可以”，侧面也避过了h1唯一性的话题。

这个问题国外也有很多讨论，http://annevankesteren.nl/2004/05/h1，里面评论中有一句话说的不错：HTML is nice to use for documents, but not so nice for building user interfaces

目前更多的考量是从SEO角度出发，因为没有资料说明搜索引擎也会按照DOM层级来确定权重优先级。

IE下定位层被select遮盖问题解决

流放之忆 — Tue, 09 Mar 2010 10:53:41 +0000

需求如图，两行的select后面各有个按钮可以触发position定位的div浮层，浮层上边缘紧贴所在行下边缘。

去掉项目外观，还原为基本的产品原型则是

如果不做任何处理的话，IE 7/8以及firefox和chrome等浏览器下没问题，但是IE 6下会是这样：

google了下。IE 6下，select的优先级比div等元素高，所以position定位在select上的浮层不管z-index设置多少都遮盖不了select元素。常规办法是浮层中嵌入一个隐藏的iframe，利用框架的高优先级来遮盖select。

单个select覆盖div浮层解决如图：

单个select覆盖div层级解决DEMO

然后，回归到需求，两行之间距离非常近，直接如此处理可以看到，无论在任何浏览器下，select 2都会遮盖掉panel 1，如图：

文档流中，后出现的元素默认层级比之前的高，这里需要给每行单独设定z-index，让第一行的层级高于第二行，即可解决，如图：

多个select覆盖div层级解决DEMO

虾米网新版有感

流放之忆 — Sat, 18 Jul 2009 05:54:01 +0000

虾米网用了不到一年，说不上重度用户，因为我集中在找歌听歌，而很少参与互动。不过也被它改变了不少习惯：听歌放弃了yobo.com、vvpo.com，找歌放弃了google。这次又要上版本了，说点想法。

我需要的

1.歌曲外调插件的完善

同一个页面出现多个单曲的播放器的时候，现在的虾米播放器不会自动停止之前在播放的歌曲，会造成N首歌同时播放。如果可以做成换歌自动停止之前在放的歌曲，体验会好许多。（目前实现的只是回到虾小米打碟页面自动停止外站播放器）

2.虾小米打碟播放器与精选集

在打碟的所有歌曲直接可以导出成一张精选集。因为一开始未必对要做的精选集有明确的选曲范围。
播放偏好三选一有点麻烦，我更倾向于把播放拆分成两个按钮，一个播放，一个加入播放列表。很多时候我把虾米打碟当作临时精选集使用。

3.虾歌

还是没有加入文件夹映射功能，这让有文件夹洁癖的俺情何以堪啊= = 不知道第一版里，重装系统或者移动文件夹后不能还原的BUG还在不在？顺便，虾歌的更新，建议在频道页面上写上重要的升级说明吧，给人点升级的动力……

虾米的改动

站内用户间歌曲推荐及网站向会员推送可能会喜欢的歌曲已成为音乐网站的标配，这次首页改版也是围绕着这两个推荐的主题来的。

用户间推荐个人感觉是大多网站都做成了鸡肋，最主要的原因我在现实中已经体验过：音乐口味见仁见智，即使兴趣相同，朋友推荐来的也未必符合自己的口味，所以以后一直是自己找歌。也许，是我对“推荐”的期望值太高，导致迅速丧失信心了吧。

这次加上了“大家的、好友的、虾米猜你喜欢”三类推荐，个人感觉“大家的”不如来自小组成员的推荐。全站用户推荐最大的缺陷是用户基础大了会导致变换过快，匹配度随之下降。

虾米猜你喜欢没什么多说，取决于数据匹配的算法。

后记

记得之前一次思践说虾米还有大把的创意大把的新功能大把的改进空间，事实上接近一年来也一直在改进。值得称道的是改进的步调，细密改良但是避免颠覆。作为互联网从业人员对这点感触颇深，网络产品本应如此，大规模推到重来带来的用户的不适应感是致命的，细水长流给人的印象也是“一直在努力”。

再谈Internet Explorer Collection

流放之忆 — Fri, 29 May 2009 04:42:52 +0000

去年写过Internet Explorer Collection简介，当时还是继续使用了IEtester，但是过了几个月后彻底抛弃了IEtester转向Internet Explorer Collection。

之前用IEtester的时候，系统默认安装IE 7，用山寨的IE 6和IE 8看表现，然而后来有几次发现山寨的IE 6有一些CSS表现和正版的有区别。在目前的状况下保证项目在IE 6下的完美是必须的，而且后来Internet Explorer Collection在每个版本中都加入了IE Developer toobar，这两个原因促使我开始使用Internet Explorer Collection。

我的开发环境是XP安装IE6，然后安装Internet Explorer Collection的IE 7和IE 8。原因：

保证IE 6下的完美表现；
IE 6下的BUG可以使用内置的调试工具Developer toobar来查找原因；
IE 7+在CSS上的表现相对IE 6要容易驾驭的多，基本在Firefox上预览OK的在IE7，IE8下不会有太多问题。

顺带一提，现在的Internet Explorer Collection内置的IE 8版本号已经是8.00.6001.18702，查了下资料是Windows 7以下系统中IE 8的正式版本号。不过我自己电脑上山寨IE 8总是会莫名其妙自动关闭……所以装了个Windows 7来看IE 8的表现。另外，Windows 7内置的IE 8版本号是8.0.7100.0，跟Windows 7 RC的版本号吻合，不知道和6001的有什么差别。

实际上，有条件的同学可以使用Windows 7的正版IE 8，之后使用MS官方的虚拟机Windows Virtual PC来实现E 6.因为MS在Windows 7下的VPC中提供了XP镜像包的单独下载，可以完美的使用XP环境。不过这个镜像包需要CPU支持虚拟化，我的CPU不支持= =

有点缺乏方向感

流放之忆 — Mon, 05 Jan 2009 15:09:51 +0000

3号想买飞机票，但是不知道附近的订票点在哪里，就沿着马路随便晃悠。突然发现这几条平时晚上加班结束回家走过的马路，白天走起来异常陌生，我甚至不知道路边的建筑是什么样的，跟刚到上海的感觉一样。

4号晚上下班习惯性继续在公司呆着，leader走的时候问，你是不是下班除了公司就没地方可去了啊……顿时无语。

想想还真是这样，下班不在公司的话在家也是上网，查阅资料或者八卦。似乎已经把工作和生活混为一体了。平时沉溺在代码中没什么感觉，偶尔跟同事出去玩玩的话，发现现在比以前更沉闷了，不会玩不会找乐子，简直就一木头人。

于是晚上跟朋友短信聊天的时候说，突然觉得有点不明白坚持这样生活的意义了。诚然，渴望成为一名真正的前端制作，渴望成为一个优秀网站背后的制作团队一分子，梦想的成功也必须有足够的投入来支撑，但是，目标应该是在前方，而不是在背上。现在是不是有种背负压力的感觉？

元旦放假三天在床上睡了两天半补觉，之前的三个星期有点拼命，而且到最后一天晚上通宵，发现已经不像同事一样到了半夜会困了，似乎生物钟已经被扭转——也不是不困，而是没有睡意。这几天任务很轻松，却有种不知道干嘛的不适应感，很无语。