<?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>小前</title>
	<atom:link href="http://www.xiaoqian.org/feed" rel="self" type="application/rss+xml" />
	<link>http://www.xiaoqian.org</link>
	<description>专注前端开发、用户体验、产品设计</description>
	<lastBuildDate>Wed, 22 Feb 2012 15:21:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>【邪恶的IE6】不支持position:fixed的解决方案</title>
		<link>http://www.xiaoqian.org/26.html</link>
		<comments>http://www.xiaoqian.org/26.html#comments</comments>
		<pubDate>Tue, 21 Feb 2012 08:46:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[BUG]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=26</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;擦！IE6，各种兼容，各种头疼！这个问题算是老问题了，一直没时间解决。在项目中，正常情况下在Firefox、Chrome里弹出层是垂直居中于窗口定位，并且随滚动条滚动且不晃动。可是，IE6那玩意就是不给力，完全无视，没效果！肿么办？还能肿么办，杀啊！于是在网上找，发现一种用CSS的expression方法，虽然这种方法会增加页面读取的计算次数，可是用它来修复IE6下固定定位随滚动条滚动且不晃动还是蛮有效的，也不会影响到其他CSS效果的使用，在代码兼容上不错。 //IE6下支持固定定位随滚动条滚动且不晃动的解决方案 &#60;style&#62; body &#123; _background-image: url&#40;about:blank&#41;; /*用浏览器空白页面作为背景*/ _background-attachment: fixed; /*IE6下固定定位随滚动条滚动且不晃动*/ &#125; #fixed &#123; position: fixed; top: 50%; /*其他浏览器下定位，在这里可设置坐标*/ _position: absolute; /*IE6 用absolute模拟fixed*/ _top: expression&#40;document.documentElement.scrollTop + Math.round&#40;document.documentElement.offsetHeight / 2&#41; + &#34;px&#34;&#41;;/*动态设置top位置*/ background:#f60; border: 1px solid #f00; width: 100px; height: 100px; &#8230; <a href="http://www.xiaoqian.org/26.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/26.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【邪恶的IE6】Select元素遮盖Div的BUG</title>
		<link>http://www.xiaoqian.org/24.html</link>
		<comments>http://www.xiaoqian.org/24.html#comments</comments>
		<pubDate>Wed, 15 Feb 2012 10:29:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[BUG]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=24</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;邪恶的IE6，我只想说一句：玛德，法克幼！哈，作为一名前端攻城湿，想必大家对IE6已经疾恶如仇了吧！今天在做项目的时候，遇到了这个问题在IE6下面Select元素遮盖DIV的BUG，于是就上网找解决方法，看了什么iframe包裹select，还有jQuery插件bgiframe的，感觉这两种方法对于我的情况不怎么适用，因为页面中有大量select元素，所以我最后决定用空iframe作为div的子元素覆盖select来解决。那么我们现在来看看代码： &#60;style&#62; #warp&#123;position:absolute;left:200px;top:100px;background:#000;z-index:1001;width:300px;height:200px;&#125; #warp .frame&#123;padding:0;margin:0;position:absolute;top:0px;left:0px;z-index:-1;width:300px;height:200px;&#125; &#60;/style&#62; &#160; &#60;div id=&#34;warp&#34;&#62; &#60;p&#62;Hello World&#60;/p&#62; &#60;!–&#91;if lte IE6&#93;&#62;&#60;iframe class=&#34;frame&#34; scrolling=&#34;no&#34; frameborder=&#34;0&#34;&#62;&#60;/iframe&#62;&#60;!&#91;endif&#93;–&#62; &#60;/div&#62; &#160; //【代码分析】就是用一个和div同样大小的iframe来盖住select。因为在IE中,select属于window类型控件，它会&#34;盖住&#34;所有非window类型控件，所以可以用iframe覆盖select，div覆盖iframe。当然这里不是最好的做法，最好就是用div模拟select，这样才完美。]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/24.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>初探HTML5新特性之桌面通知</title>
		<link>http://www.xiaoqian.org/21.html</link>
		<comments>http://www.xiaoqian.org/21.html#comments</comments>
		<pubDate>Sat, 04 Feb 2012 13:52:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=21</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;今天闲的无事，初探了下HTML5里面的桌面通知新特性，虽然HTML5里面有很多新特性，哈，不过小前唯独对这个新功能特别感兴趣。依据这种特性，我们可以做一些内容推送的东东，提高用户体验，方便用户获取最新内容。好吧，既然是学习，肯定要边学边做，小前写了一个demo，和大家一起学习学习。 &#60;!DOCTYPE html&#62; &#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34; xml:lang=&#34;en&#34;&#62; &#60;head&#62; &#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html;charset=UTF-8&#34; /&#62; &#60;title&#62;显示桌面通知&#60;/title&#62; &#60;/head&#62; &#60;body&#62; &#60;button id=&#34;btn&#34;&#62;显示桌面通知&#60;/button&#62;（需要在Web服务器下运行，目前只有Webkit内核的浏览器支持） &#60;script type=&#34;text/javascript&#34;&#62; var btn = document.getElementById&#40;'btn'&#41;; btn.onclick = showDesktopNotice;//注意：必须触发事件才能显示桌面通知 &#160; //显示桌面通知 function showDesktopNotice&#40;&#41;&#123; var myNotifications = window.webkitNotifications; //判断浏览器是否支持webkitNotifications if&#40;myNotifications&#41;&#123; //判断是否获得了权限 if&#40;myNotifications.checkPermission&#40;&#41; == 0&#41;&#123; //实例化通知对象 &#8230; <a href="http://www.xiaoqian.org/21.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/21.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>神奇的Javascript，神奇的字符串比较</title>
		<link>http://www.xiaoqian.org/20.html</link>
		<comments>http://www.xiaoqian.org/20.html#comments</comments>
		<pubDate>Thu, 12 Jan 2012 08:39:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=20</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;今天无意当中碰到一个很诡异的问题，在Javasript中字符串数字的比较，按正常的来说不应该出现这种情况，因为我们一般在做数字之间的比较时，都会先做类型转换，转换后就没问题。不过既然有这种情况发生，我们今天就来分析分析，大家看下面的code： var a = '100' &#62; '2';//false var b = '3' &#62; '2';//true &#160; //很诡异吧！大家肯定在想，为什么？ //为什么 a = false, b = true ？ //哈，一开始我也是琢磨了半天，为什么呢？原来在Javasript中字符串这几种（&#60;、&#62;、&#60;=、&#62;=）运算符的比较都是字典序比较的。那什么是字典序呢？我查了一下，是一种排序算法。那字典序是如何排序的呢？它是一位一位的比较,从第一位开始,直接比较ASCII码,若不等就直接返回结果,若相等再比下一位,直到比较完毕。 //上面的例子我们可以分析下，我们先罗列出字符串ASCII码对应关系，这样一比一，按照字典序的规则就很容易明白了。 '100' = &#91;49,48,48&#93;; '2' = &#91;50&#93;; '3' = &#91;51&#93;; &#160; //var a = '100' &#62; &#8230; <a href="http://www.xiaoqian.org/20.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/20.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>2012，我想要的Style</title>
		<link>http://www.xiaoqian.org/11.html</link>
		<comments>http://www.xiaoqian.org/11.html#comments</comments>
		<pubDate>Fri, 06 Jan 2012 08:01:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[My Style]]></category>
		<category><![CDATA[极简]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=11</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;2012，新的一年，新的目标，今年，我最想要的就是一张简单的大桌子＋一台iMac＋一把舒服的椅子。不奢求太多，就这些，简单又舒服！这就是我喜欢的，我想要的Style！]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/11.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>关于Flash遮盖Div的解决方案</title>
		<link>http://www.xiaoqian.org/9.html</link>
		<comments>http://www.xiaoqian.org/9.html#comments</comments>
		<pubDate>Fri, 23 Dec 2011 07:49:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=9</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;今天在做公司项目时候，发现的这个问题在IE下div被flash遮盖住了。Firefox、Chrome，表示毫无鸭梨。法克！该死的IE，问题来了，果断要处理啊！所以在这里小前把解决方案分享给coder们，和大伙儿一起学习，一起进步。 可以给flash控件添加wmode属性，值为transparent或opaque，针对不同浏览器写法上有所差异： //embed标签：支持Firefox、Chrome等Mozilla系列或Netscape插件的浏览器 &#60;embed width=&#34;480&#34; height=&#34;400&#34; type=&#34;application/x-shockwave-flash&#34; src=&#34;http://player.youku.com/player.php/sid/XMzI4NDEwODky/v.swf&#34; allowfullscreen=&#34;true&#34; quality=&#34;high&#34; allowscriptaccess=&#34;always&#34; wmode=&#34;transparent&#34; /&#62; &#160; //object标签：只支持IE系列或其它Activex控件的浏览器 &#60;object width=&#34;300&#34; height=&#34;300&#34; classid=&#34;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&#34; codebase=&#34;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&#34;&#62; &#60;param name=&#34;quality&#34; value=&#34;high&#34; /&#62; &#60;param name=&#34;src&#34; value=&#34;wmode.swf&#34; /&#62; &#60;param name=&#34;wmode&#34; value=&#34;transparent&#34; /&#62; &#60;/object&#62; 这里我们解释下flash控件wmode属性的这两个值，transparent、opaque。 1、opaque和transparent基本上差不多，只是在某些特殊情况下有点不同。 2、opaque在flash中需要用到输入法时输入法软件会定位不准。 3、transparent在同一页面中用得太多的话会有性能问题。 //最后我们顺带说下flash兼容，为了确保大多数浏览器能正常显示flash，最好在embed标签外面包裹object标签，这样IE，FF都能识别到。以下是兼容大多数浏览器的写法： &#60;object width=&#34;300&#34; &#8230; <a href="http://www.xiaoqian.org/9.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/9.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript之replace函数装逼用法</title>
		<link>http://www.xiaoqian.org/7.html</link>
		<comments>http://www.xiaoqian.org/7.html#comments</comments>
		<pubDate>Wed, 14 Dec 2011 03:44:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=7</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;Javascript的String.replace函数，主要用来替换字符串的。今天我们就不说一般用法了，比如传字符串，正则表达式来处理，jser们应该都会吧！哈，小前给大伙儿介绍一种replace函数的装逼用法，传入一个处理函数，这个函数的return值就是要替换成的内容。 例如，我们要获取id为div1和div2的两个元素的高度和宽度，大家可能会想到使用split切分字符串，然后用Array.forEach做循环。例如下面的代码： //普通写法 &#34;div1 div2&#34;.split&#40;' '&#41;.forEach&#40;function&#40;a,i&#41;&#123; console.log&#40;a&#41;; &#125;&#41;; 这样做对于支持forEach的高级浏览器还是可以的，否则需要扩展数组原型了，不建议扩展原型，最好使用内置的函数。即使不扩展原型提供个额外的函数来操作，就又是浪费。 所以这里我们可以这样做： //装逼写法 var s1 = 'div1 div2', s2 = 'Width Height', r = /\S+/g, wh = &#123;&#125;; s1.replace&#40;r, function&#40;a&#41;&#123; var elem = document.getElementById&#40;a&#41;; wh&#91;a&#93; = &#123;&#125;; s2.replace&#40;r, function&#40;b&#41;&#123; wh&#91;a&#93;&#91;b&#93; = elem&#91;'offset' &#8230; <a href="http://www.xiaoqian.org/7.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/7.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Javascript代码编写规范</title>
		<link>http://www.xiaoqian.org/5.html</link>
		<comments>http://www.xiaoqian.org/5.html#comments</comments>
		<pubDate>Thu, 08 Dec 2011 09:28:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.xiaoqian.org/?p=5</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160;作为一名合格的前端攻城师，代码规范是少不了的。无规矩不成方圆，当然Javasript的代码编写也要有规范，良好的规范能大大促进团队工作的效率和代码的质量。今天小前给coder们分享一些Javascript代码编写规范，希望大家能牢记哦！ Javascript语句规范 1、语句必须都有分号结尾，除了for, function, if, switch, try, while 2、只有长语句可以考虑断行，如： //错误写法 TEMPL_SONGLIST.replace&#40;'{TABLE}', da&#91;'results'&#93;&#41; .replace&#40;'{PREV_NUM}', prev&#41; .replace&#40;'{NEXT_NUM}', next&#41; .replace&#40;'{CURRENT_NUM}', current&#41; .replace&#40;'{TOTAL_NUM}', da.page_total&#41;; &#160; //正确写法 TEMPL_SONGLIST.replace&#40;'{TABLE}', da&#91;'results'&#93;&#41;. replace&#40;'{PREV_NUM}', prev&#41;. replace&#40;'{NEXT_NUM}', next&#41;. replace&#40;'{CURRENT_NUM}', current&#41;. replace&#40;'{TOTAL_NUM}', da.page_total&#41;; &#160; //为了避免和JSLint的检验机制冲突，&#34;.&#34;或&#34;＋&#34;这类操作符放在行尾. 3、避免额外的逗号。如：var arr = [1,2,3,]; 4、所有的循环体和判断体都需要用”{}”括起来。如： //错误写法 &#8230; <a href="http://www.xiaoqian.org/5.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/5.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>世界，你好</title>
		<link>http://www.xiaoqian.org/3.html</link>
		<comments>http://www.xiaoqian.org/3.html#comments</comments>
		<pubDate>Mon, 05 Dec 2011 13:54:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://localhost/wordpress/?p=3</guid>
		<description><![CDATA[var str = 'Hello World'; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext('2d'); context.font = "80px verdana"; context.fillText(str,90,120);]]></description>
		<wfw:commentRss>http://www.xiaoqian.org/3.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

