陈成的博客

本文将提供一种一劳永逸的翻墙方式（ssh -D），实施之后，那道墙——对你来说——将从此透明。

本文面向的用户：使用Windows作为操作系统并且使用Firefox作为常用浏览器。

第一步：免费获取拥有SSH权限的帐号和密码。

默认的免费获取方式：将本文转载到你自己的博客上，将转载后的文章网址发送到。

注意：转载前请先确认自己是(或曾是)一名blogger(博客)，否则将会浪费彼此的时间。

转载方式：拷贝文章代码至博客后台HTML编辑器中，直接发布即可，文章标题自拟，可在前后文插入自己的评论。

经过人工审核，你将收到一封附有五个拥有SSH权限的帐号和密码的电子邮件，你可以将它们赠与你信任的人。

更多获取方式将在今后陆续激活，请关注我们的最新更新：https://friendfeed.com/fuckgfw

第二步：配置MyEnTunnel软件

下载并安装MyEnTunnel，该软件全名为My Encrypted Tunnel。

一键下载：https://dl.getdropbox.com/u/873345/download/myentunnel.exe

按照上图将第一步收到的帐号信息填写到相应的地方后，点击按钮，再点击按钮。

第一次连接过程中会出现一个认证对话框，按照提示确认即可。以后的自动连接中将不再出现此认证对话框。

最后点击按钮，使对话框隐藏到系统任务栏中。

提示：

为MyEntunnel创建一个快捷方式，将其复制到系统的【启动】（C:\Documents and Settings\当前用户名（需要修改成你自己的）\「开始」菜单\程序\启动）文件夹中，今后开机便可自动启动软件，并自动连接服务器。

绿色代表连接成功且稳定；黄色代表正在连接或重新连接；红色代表连接失败。

第三步：配置Firefox浏览器

假设你正使用Firefox浏览器阅读本文。

一键安装：http://autoproxy.mozdev.org/latest.xpi

点击立即安装，安装后，重新启动Firefox。然后你会看到如下对话框，选择gfwlist (P.R.China)后，点击确定。

接着你会看到Firefox主界面右上角出现有一个“福”字图案，点击“福”。

点击“代理服务器——编辑代理服务器”。

随即出现如下画面，你会看到如GAppProxy、Tor和Your Freedom这样一系列代理服务器名称。

将GAppProxy一栏的参数修改为如下图所示。

修改完毕后，点击确定。至此配置已全部就绪。

获取更多帮助，请关注反馈中心：https://friendfeed.com/fuckgfw-feedback

第四步：支持fuckGFW

1. 如果您翻墙成功，请大笑一声并用充满磁性地低音说出：Hello, world!
2. 如果由于线路原因，始终翻墙不成，不要气馁，给我们发Email，咱们一起解决问题。
3. 假如哪天突然无法正常连接，请先到反馈中心汇报，我们会及时做出反应。
4. 目前您有如下几种方式及时获取我们的最新动态：FriendFeed | Twitter | Blog。
5. 保持默契，我们相信您一定可以做到。

版权信息：您可以自由复制、传播、演绎本作品且无需署名、无需注明原始出处。

IPA下载，感谢Three20框架。

Demo(请用IE6打开)：http://www.chencheng.org/demo/inline-element-bugs-in-ie6.php

Bugs：

1. 如果行内有inline-block元素，line-height会不起作用
2. 行内的inline-block元素设置vertical-align:inherit;(继承)，能解决Demo2的bug

欢迎补充。

Demo：http://www.chencheng.org/demo/css-expression.php

既然已经没有了性能问题(请带tor)，为什么用的人还是不多的？

Demo在old9的基础上加了一个图片水平垂直居中和表单元素hover的例子。

欢迎讨论。

==

@一楼：

因为有很多CSS属性（比如:hover, max-width…）IE Only地不支持，所以我们才用IE Only的CSS Expression来实现。

个人觉得CSS Expession更灵活在于：不用等待页面load，然后定位DOM元素，然后。。。

用IE6/7打开下面两个Demo来对比下，应该就能明白以前为什么说他有性能问题了。
http://www.chencheng.org/demo/css-expression-efficiency.php
http://www.chencheng.org/demo/css-expression-efficiency2.php

==

补充一篇用expression解决IE6bug的文章：A fix to the IE6 line-height/replaced element bug

Demo：http://www.chencheng.org/demo/css3.php

当Firefox 3.1a开始全面支持CSS3，再不恶补下这块的知识可能就要out了。。。

Demo：http://www.chencheng.org/demo/css-shadow.php

Demo里的三种方法：

• 方法1是两层div，兼容FF3.1a+, Safari 3+, Chrome, IE6/7
• 方法2是两层div，除了IE8，全兼容(IE8应该也有方法可以兼容，没仔细去调)
• 方法3是一层div，兼容FF3.1a+, Safari 3+, Chrome, IE6/7/8

注意点：

• Filter: DropShadow 里的color是可以设置透明度的，通过#AARRGGBB里的AA，以16进制表示。比如60%的黑色是#3C000000
• -(moz|webkit)-box-shadow 可以设置多重shadow，见方法三第二张图片

先来看玉伯的总结：

JS是一段一段执行的（以<script>标签来分割），执行每一段之前，都有一个“预编译”，预编译干的活是：声明所有var变量（初始为undefined），解析定义式函数语句。

还有个关于 "window作用域下，a = 1和var a = 1" 的区别的也很经典：

a = 1相当于window.a = 1，是动态地为window添加一个成员；
var a = 1是在当前作用域（也就是window）下声明一个a，这个声明是在整个作用域内都有效的。

换句话说，其实区别就在于var a = 1比a = 1多了一个声明的行为。

再看几个例子：

1. alert(t);
   alert('ok');
   t = 2;

   t未声明，执行报错。

2. alert(t);
   alert('ok');
   var t = 2;

   弹出undefined和ok。预编译的时候，声明了变量t；执行到alert(t)这行代码的时候，t尚未被赋值，所以弹出undefined。

3. a();
   function a() {}
   alert('ok');

   弹出ok。预编译的时候，解析了定义式函数语句function a() {}，顺利执行。

4. a();
   var a = function() {};
   alert('ok');

   a不是函数，执行报错。预编译的时候，声明了变量a = undefined；执行到a()时，a还等于undefined，不是函数，所以执行a()会报错。

5. <script type="text/javascript">
   	a();
   	alert('first block');
   </script>
   <script type="text/javascript">
   	alert('second block');
   </script>

   弹出second block。因为JS是一段一段执行的，第一段执行到a()的时候报错，整个第一段都不会再执行，第二段正常执行。

firefox下的还有个小技巧：

如果上述例子中该报错的没有报错，输入about:config, 搜索strict, 看下javascript.options.strict, 如果是false的把他改为true。

这些CSS Selector在平时写页面的时候用地不多，只在JavaScript库、Firefox插件、iPhone页面里有过接触。

推荐大家尽量多用用。因为大部分的Selector都仅有“落后”的IE 6不支持；至于IE 6，要么不支持他，要么针对他写个hack即可。

CSS2，除了IE6，其他浏览器都支持

• E > F —— 匹配E的子元素F
• E:first-child —— 匹配父元素的第一个子元素是E的E
• E:link, E:visited
• E:active, E:hover, E:focus
• E + F —— 匹配紧挨着E后面的F
• E[foo] —— 匹配含foo属性的E
• E[foo="warning"] —— 匹配foo属性完全等于warning的E，如<E foo="warning">
• E[foo~="warnging"] —— 匹配foo属性包含warning的E，如<E foo="tip warning">

CSS3

• E ~ F —— 匹配E以后的所有F，IE6不支持
• E:empty —— 匹配空元素E，IE6, IE7不支持

更详细的内容参见W3C Specification on CSS3 Selectors。

[+] 20081105：发现一个CSS3伪类的列表，Overview of CSS3 Structural pseudo-classes。

看到这个需求的时候就在暗爽，又可以搞定一个知识点了。哈哈，一天的奋斗之后，果然有所收获，而且经过怿飞的指点，在跨域问题解决上还有所突破(不通过hash)。

看Demo，兼容IE，FF，Safari。

方案说明：

需求是：A页面(taobao.com)要嵌入B页面(alibaba.com)，因为不能确定B页面的高度，所以要求高度自适应。

解决方法：简单来说就是在B页面里创建一个和A同域的iframe C，让C和A之间可以通讯，以把B的高度传过去。

那么怎么传过去呢？以前的方法是在C里改变parent.parent(即A)的location.hash，但是改hash会生成浏览器历史记录，点后退前进按钮用户体验不佳。我们试了下在A页面直接取frames[b].frames[c].location.hash，居然可以取到。

剩下的就简单了，在A里指定iframe B装载完成后获取C的hash，然后通过hash设置iframe B的高度。

具体代码：

A页面：(基于YUI)

/**
 * 待iframe载入后执行函数
 *
 * @param {Element} el
 * @param {Function} func
 */
var onIframeLoad = function(el, func) {
	var cb = function() {
		try {
			func.call(this);
		} catch (e) {}
	}
	if (TB.bom.isIE) {
		el.onreadystatechange = function(){
			if (el.readyState == 'complete') {
				setTimeout(cb, 0);
				el.onreadystatechange = null;
			}
		}
	} else {
		el.onload = function() {
			setTimeout(cb, 0);
			el.onload = null;
		}
	}
};
/**
 * 跨域iframe高度自适应封装
 *
 * @param {String} name
 */
var crossDomainIframe = function(name) {
	var iframe = YAHOO.util.Dom.get(name);
	var xclient = 'xclient';
	onIframeLoad(iframe, function(){
		try {
			var h = frames[name].frames[xclient].location.hash.substring(1);
			if (h == '') {
				var func = arguments.callee;
				setTimeout(function(){ func(); }, 20);
				return;
			}
			iframe.style.height = h+'px';
		} catch (e) {}
	});
};
// 执行
crossDomainIframe('frame_content');

B页面：

(function(){
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
function adjust() {
	var h = document.documentElement.scrollHeight || document.body.scrollHeight;
	try {
		if (document.getElementById('xclient')) {
			var divEl = document.getElementById('xclient').parentNode;
			console.log(document.getElementById('xclient').parentNode);
			divEl.parentNode.removeChild(divEl);
		}
		var el = document.createElement('div');
		el.innerHTML = '';
		document.body.appendChild(el);
	} catch(e) {}
}
addLoadEvent(adjust);
})();

C页面：空页面，有个文件避免404发生即可

扩展阅读：

• 口碑UED 》再谈iframe自适应高度
• 使用window.name解决跨域问题
• Introducing CrossFrame, a Safe Communication Mechanism Across Documents and Across Domains

猛击这里查看：前端开发搜索引擎。

没啥技术含量，直接用google自定义搜索引擎做的，填完表后复制代码直接搞定。上面那个链接里有公开搜索网站的列表，目前添加有79个国内国外的专业前端网站和Blog，有漏掉的或者更好的网站请通知我，随时更新。用的google appengine的服务器，访问应该比较稳定比较快。

google提供了协作的功能，有兴趣共同维护搜索列表的请联系我。

下图是搜索“清除浮动”时的结果，可以看出非常具有针对性。

PS：搞完后发现嗷嗷同学一年前就搞过了，汗，落伍啊。