﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Javascript前端征途</title>
	<atom:link href="http://www.nickli.cn/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.nickli.cn</link>
	<description>var Nick= new Person({ title: &#34;前端架构工程师&#34;, spoken: &#34;我一直在努力&#34; });</description>
	<lastBuildDate>Tue, 13 Jul 2010 03:51:01 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>ie6的absolute元素width百分比设置的问题</title>
		<link>http://www.nickli.cn/?p=102</link>
		<comments>http://www.nickli.cn/?p=102#comments</comments>
		<pubDate>Tue, 13 Jul 2010 03:51:01 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=102</guid>
		<description><![CDATA[&#60;div style=&#8221;width:700px;height:700px;background:#00CC99&#8243;&#62; &#60;div style=&#8221;background:#330066;width:500px;height:500px;&#8221;&#62; &#60;div style=&#8221;float:left;background:#FF3366;&#8221;&#62; &#60;div style=&#8221;width:300px;height:300px;&#8221;&#62;&#60;/div&#62; &#60;div style=&#8221;width:100%;height:100%;background:red;position:absolute;left:0;top:0;&#8221;&#62;&#60;/div&#62; &#60;/div&#62; &#60;/div&#62; &#60;/div&#62; 在非ie6的浏览器中都是满屏幕的红， 说明非ie6的浏览器的width和height的百分比，都是相对的上个相对定位或者决定定位的元素，没有就为html元素 而，ie6中的width和height 的百分比，相对的是上个有高宽显示设置的元素，而且height的百分比设置失效，所以上述代码在ie6中就出现宽度穿越了他的父元素而遇见width:500px;的元素的时候，边把自己设置成了width:500px;而height的设置则失效，，， 这个， 让人很蛋疼！ie6，真的该早点走了！]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=102</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ie内核和标准浏览器间对width:50%的差异解读</title>
		<link>http://www.nickli.cn/?p=98</link>
		<comments>http://www.nickli.cn/?p=98#comments</comments>
		<pubDate>Wed, 30 Jun 2010 02:59:09 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=98</guid>
		<description><![CDATA[是这样的，一个大的盒子里面有两盒子，并成为子left和字right吧，两都是50%的float:left; &#60;style&#62; .c {width:887px;height:100px;background:blue;} .l ,.r{width:50%;float:left;height:50px;background:red;} &#60;/style&#62; &#60;div class=&#8221;c&#8221;&#62; &#60;div class=&#8221;l&#8221;&#62;&#60;/div&#62; &#60;div class=&#8221;r&#8221;&#62;&#60;/div&#62; &#60;/div&#62; 预设的效果是类似下面这样的 嗯，你用上面的代码测试下， 没错，在ff，chrome等标准浏览器下面都显示为预想的效果，但是，在ie内核的浏览器下面则出现了偏差，子left和子right出现了错行，没有显示在同一行内，如下 这个，是ie内核对50%的解释问题吧，887px的50%是多少，443.5px，在ie看来，基本单位是1px，0.5px在ie里面被补上了0.5px，于是left和right加起来总共多出了1px，于是超过了父887px的width于是被ie强制换行，如果父节点的width为偶数，比如666px，那么它的50%就是333px，那么最后的渲染效果也会是你的预期，这个是个很小的细节，开发中但是还是要注意下了。]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=98</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ie6下面试用png使用滤镜需知</title>
		<link>http://www.nickli.cn/?p=92</link>
		<comments>http://www.nickli.cn/?p=92#comments</comments>
		<pubDate>Wed, 09 Jun 2010 08:30:02 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=92</guid>
		<description><![CDATA[一个弹出框，圆角，带阴影，还半透明的阴影，那么，你肯定会想到用png了，是的，ie下，大家别无他法。 一般会这样来做 &#60;div id=&#8221;box&#8221; style=&#8221;背景图片，if==ie6（加滤镜）&#8221;&#62; &#60;div id=&#8221;boxcenter&#8221;   style=&#8221;"&#62;这里是弹出框的内容&#60;/div&#62; &#60;/div&#62; ok,一个漂亮的圆角阴影半透明的弹出框出来了，但是，在ie6下面，你会发现这个弹出框只可远观而不可亵玩， 你 里面的按钮啊什么的都无法捕捉到你的鼠标事件，杯具发生了。你在里面的按钮啊什么的都用不了。为什么？ 这个，真的很难说，归咎于ie6的私有滤镜了，但是，如果你的png图片，在boxcenter的位置 切空了，也就是 你的png是个只有边框的图片的话，那么加了滤镜后，的png透明处都是可以使用的。 切记一点，背景图片的png加了滤镜后，这个element内部只有在png的透明位置才能响应你的鼠标，其他地方 都被滤镜屏蔽掉了！！！！！ 万恶的ie6！！！！！！！！！！！]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=92</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>canvas+workers初探</title>
		<link>http://www.nickli.cn/?p=84</link>
		<comments>http://www.nickli.cn/?p=84#comments</comments>
		<pubDate>Thu, 03 Jun 2010 07:57:52 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=84</guid>
		<description><![CDATA[最近用业余时间看了下html5的资料，不少让人激动的新新特性，用canvas+worders做了个这个玩玩]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=84</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>用canvas写了个简单的写字板</title>
		<link>http://www.nickli.cn/?p=70</link>
		<comments>http://www.nickli.cn/?p=70#comments</comments>
		<pubDate>Tue, 01 Jun 2010 10:48:07 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=70</guid>
		<description><![CDATA[用canvas写了个超级简单的写字板 &#60;html&#62; &#60;head&#62; &#60;title&#62;Canvas tutorial&#60;/title&#62; &#60;style type=&#8221;text/css&#8221;&#62; body {margin:0px;padding:0px;} canvas { border: 1px solid black; position:absolute;top:170px;left:300px;margin:0px;padding:0px;} &#60;/style&#62; &#60;/head&#62; &#60;body&#62; &#60;canvas id=&#8221;tutorial&#8221; width=&#8221;300&#8243; height=&#8221;300&#8243;&#62;&#60;/canvas&#62; &#60;script&#62; function thumbnail(){ this.load = function(){ this.canvas = document.getElementById(&#8216;tutorial&#8217;); if (this.canvas.getContext){ this.ctx = this.canvas.getContext(&#8217;2d&#8217;); } this.ispause=true;//是否暂停绘画，在鼠标按键松开的时候 this.c_p=getPosition(this.canvas); } } window.onload = function(){ window.thumb = new thumbnail(); thumb.load(); thumb.canvas.onmouseup=function(){ thumb.ispause=true; } thumb.canvas.onmousedown=function(event){ thumb.ispause=false; [...]]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=70</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>webkit浏览器下面的css top：50%问题</title>
		<link>http://www.nickli.cn/?p=65</link>
		<comments>http://www.nickli.cn/?p=65#comments</comments>
		<pubDate>Fri, 28 May 2010 09:54:31 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=65</guid>
		<description><![CDATA[有这么个效果，CSS使DIV层绝对居中【水平和垂直】 我想这个很多的同学都知道这样做 #content{ position:absolute; width:650px; height:298px; left:50%; top:50%; margin-left:-325px;   /*设置为宽度的一半*/ margin-top:-149px;    /*设置为高度的一半*/ } IE6、IE7、Firefox全都正常显示,但是， 在chrome,safari 的webkit系浏览器下面是有问题的。 你可以试下，如果在body很高，比如2000px的情况下，你把滚动条拉到最下面，然后点击按钮来垂直居中显示这个层， 很遗憾，你发现什么都没有，而，当你把滚动条拉到最上面的时候，你会看到层这个时候垂直居中的显示在这里， 我想，这个时候大家应该知道webkit浏览器在解释top:50%的时候和其他的浏览器不同的地方了，也就是说webkit浏览器里面 ， 你要加上scollheight的高度，你的margin-top==scollheight-层的高度的一半。 而当position:fixed的时候，却有和其他浏览器里面的absolute的时候是一样的效果，回归统一了，fuck，真恶心]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=65</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>在议ie6下面void(0)之出离愤怒</title>
		<link>http://www.nickli.cn/?p=59</link>
		<comments>http://www.nickli.cn/?p=59#comments</comments>
		<pubDate>Fri, 30 Apr 2010 02:13:57 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=59</guid>
		<description><![CDATA[昨天晚上回到家后还跑回公司处理了一个bug，是这样的，我一个按钮，鼠标移动上去，要现实一个浮层，而这个按钮又是可以点击执行相关ajax操作的。简单吧，我就载在这个简单的需求上面了，至于原因，总之我承认我在这个跌过一次的坑上面又跌了一跤，记的去年在139.com的网盘项目组的时候就处理过相关问题还有过&#60; a href=&#8217;http://www.nickli.cn/?p=60&#8216;&#62;一篇博文记录&#60;/a&#62;来时刻警醒自己，而我又在这个问题上摔跤了. 我偷了个懒，觉着直接用css做了个兼容的浮层很帅，然后，又有个要命的是，我在页面是用&#60;base href&#62;标签，这逼的我在a标签上面只能写&#60;a href=&#8221;javascript:void(0)&#8221;&#62;,因为如果用&#60;a href=&#8221;#&#8221;&#62;的话，页面还是会跳到base目录下面去，这很恶心（以后要尽量避免使用base标签了！！！！！！！），总之就是我偷了个懒引来了这个问题&#8212;&#8212;a标签还有个onclick事件侦听，执行玩一个ajax后，在回调函数里面会弹出一个div浮层，而这个浮层上面的三个背景图片一个都不少的全部没出来，这个浮层被裸了！ 那么可能问题就真的出在这里，这里要感谢组里前端&#60;a href=&#8221;http://blog.htmlwind.com/&#8220;&#62;大师兄&#60;/a&#62;帮忙一起耐心调试，我们抓包发现点击按钮后，直到浮层出来，没有发现三个图片的请求发出。那么可以肯定，我们确实没有看过，这个浮层被裸了是因为图片没有回来，而不是以为其他的css的问题，那么为什么会这样呢！ 而我是把onclick换成了onmousedown，这样却发现这个浮层能现实图片了，而偶尔的是会有一张显示不出来。 有位哥们遇到过类似的问题。说几个吃饱了没事干的老外反复试验，发现这是IE6 一个底层机制的bug，说是 &#60;a href=&#8221;javascript:void(0)&#8221;&#62;或者&#60;a href=#&#8221;&#62;这样使用a标签的话并不能阻止a标签最后触发一个什么行为，导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了 那么如果真的是这样，就好理解了，因为我的浮层是有个屏蔽层的，onmousedown后，焦点已经移动 到了屏蔽层上面，a标签的onclick侦听也不在执行，那么这个a标签最后出发的那个什么行为就不会触发了，于是我 的图片就可以正常的请求url了。这个只是我的这个特定的应用场景下面的一个巧合的解决办法。 这个bug一般会出现在这样的情况下面 a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样: 1. &#60;a href=&#8221;javascript://&#8221; onclick=&#8221;dosomething()&#8221;&#62;a1&#60;/a&#62; 2. &#60;a href=&#8221;javascript:void(0)&#8221; onclick=&#8221;dosomething()&#8221;&#62;a2&#60;/a&#62; 3. &#60;a href=&#8221;###&#8221; onclick=&#8221;dosomething()&#8221;&#62;a3&#60;/a&#62; 第三种方法dosomething()中切换图片完全没有问题, 但是href=&#8221;###&#8221; 却带来了另一个问题, 占用了锚点,页面URL也不美观. 第1,2种方式虽然没有上面的问题, 但会引发IE6的奇怪bug, dosomething()中图片无法加载. 只要在dosomething();后面增加一个return false;就可以解决了. 如果是绑定事件, 同样在function最后增加return false;就行. 唉，希望如果也有碰到这样诡异问题的朋友能看了这里后能有所以收获。]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=59</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>ie6下a标签的void(0)引发的诡异问题 带来的思考</title>
		<link>http://www.nickli.cn/?p=60</link>
		<comments>http://www.nickli.cn/?p=60#comments</comments>
		<pubDate>Fri, 30 Apr 2010 01:31:01 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=60</guid>
		<description><![CDATA[1 &#60;HTML&#62; 2 &#60;HEAD&#62; 3 &#60;TITLE&#62;1.html &#60;/TITLE&#62; 4 &#60;/HEAD&#62; 5 6 &#60;BODY&#62; 7 &#60;a href=&#8221;javascript:void(0)&#8221; onclick=&#8221;loadiframe()&#8221;&#62;点我咯&#60;/a&#62; 8 &#60;script&#62; 9 var loadiframe = function(){ 10 var myi=document.createElement(&#8220;iframe&#8220;); 11 myi.src=&#8220;2.html&#8220;; 12 document.body.appendChild(myi); 13 } 14 15 &#60;/script&#62; 16 &#60;/BODY&#62; 17 &#60;/HTML&#62; 上面代码保存为1.html &#60;HTML&#62; 2 &#60;HEAD&#62; 3 &#60;TITLE&#62; 2.html &#60;/TITLE&#62; 4 &#60;/HEAD&#62; 5 6 &#60;BODY&#62; 7 这里是第2.html 8 [...]]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=60</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>好吧，得寻找前端战友了，qq宠物招聘</title>
		<link>http://www.nickli.cn/?p=56</link>
		<comments>http://www.nickli.cn/?p=56#comments</comments>
		<pubDate>Wed, 24 Feb 2010 08:37:09 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[生活随笔]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=56</guid>
		<description><![CDATA[职位: 前端开发工程师 待遇: 面议 有效期至: 2009-02-31 工作地点: 深圳南山区 公司名称: 腾讯公司 简历投送邮箱: 252759102@qq.com nickli@tencent.com 学历: 大专以上 是否应届: 非应届 年龄要求: 23以上 性别要求: 不限 职位描述： 1. 负责QQ宠物产品的前端开发工作，与后台开发人员配合实现社区的交互。 2.参与产品的研究与规划 ； 3.负责产品前端方案的实施与优化； 职位要求： 1.大专以上学历； 2.2年以上前端开发经验；有大型Web项目开发经验者尤佳; 有从事过网页游戏开发经验者优先； 3. 精通HTML、CSS、JavaScript等前台相关技术,熟悉W3C网页标准,了解至少一种后台语言的开发机制(如php，Java等)； 4. 能熟练运用一种常见AJAX框架,如Jquery等，参与或者开发过某种JS框架者尤佳； 5.熟悉面向对象编程，对JS性能优化有一定了解。 6. 强烈欢迎敢于面对问题、善于解决问题，善于学习，善于沟通，人品好的同学； 补充说明： 本职位招聘2-3人，欢迎深圳及深圳周边的同学请快快加盟吧。 另外，有强烈的学习欲望，对新事务和新知识有明锐的触角和良好的学习能力，前端的技术日新月异，我们需要不断的一起学习一起努力一起讨论一起探索。 我们为您提供：自由开放的工作环境，团结友爱的团队，丰富多彩的业余活动（篮球协会，羽球协会，足球协会，台球协会，舞蹈协会等等），不定期的腐败活动，行业内有竞争力的薪酬等等。所有这一切只是为了让您感受，这不仅仅是一份工作，也可以做为您的事业，您的生活！ 如有不明事宜可联系QQ252759102或者致电 86013388-83583（9：30-17：30，周一到周五）]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=56</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>用 HTML Canvas 创建一个图片浏览器</title>
		<link>http://www.nickli.cn/?p=49</link>
		<comments>http://www.nickli.cn/?p=49#comments</comments>
		<pubDate>Mon, 25 Jan 2010 10:16:00 +0000</pubDate>
		<dc:creator>nick</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.nickli.cn/?p=49</guid>
		<description><![CDATA[HTML 5 引入了新的的网页元素：Canvas 是一片空白的绘图区域，网页开发者可以利用 JavaScript 在该区域中自由地进行 2D 绘图。Canvas 可以用于渲染华丽的网页设计界面。本文通过一个详细的实例来说明如何用 Canvas 来制作一个图片的浏览器。最终的效果可以达到 Flash 程序的效果。通过本文，读者可以了解如何使用 Canvas 的各种函数以及如何与用户事件进行交互，适合读者为 Web 设计和架构师。]]></description>
		<wfw:commentRss>http://www.nickli.cn/?feed=rss2&amp;p=49</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
