没骗大家,什么马云啊,马化腾啊,比尔盖茨啊,养猪的那个啊,脑白金那个啊都来了.大家去围观吧.
http://ued.taobao.com/blog/2010/02/05/interactive-controls-innovation3/#comments
注意看评论

ued · 博客 · 淘宝 · 群星

来一个例子:代码很简单,如下:

 <table border="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</table>

如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了:

 <style>
tr{position: relative;}
</style>

看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉,

你看不到任何东西会重叠起来.

我可从来没有想过要耍大家,虽然表面上看不到问题,但是现在让我们的ie develop tool上场吧,它会告诉我们layout带来了什么

注意两幅图中的不同和相同.注意左边视图中的蓝色线框圈起来的东西,这个tool的作用就是右边点击某个元素会在网页中用线框框起来.

可是注意,我两次分别点击了两个不同的元素.而线框框起来的是同一个地方,我汗,我没看错吧.

是的,也就是说两个tr重叠了,可是奇怪的是tr里的元素渲染都完全正确,不影响到任何外观样式.不要以为这样是安全的,隐患在此时埋下.

我其实是在做一个模拟窗口的时候遇到这个问题的,我用了一个两行的table,第一行做窗口标题栏,可以拖动,第二行做主视图,可是后来我发现table的第二行把第一行盖住了,虽然外表看上去很正常,但是标题栏却因为被挡住不可以点击和拖动了.

要修复这个现象,去掉tr中的position即可

3.由此说来:

不知道大家写css的时候是不是用一些reset来先reset下,反正我是这样做的,我的NetBeans里的css模板里就存着reset,每个css文件头部都会有这样一段:

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 12px;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
/* 元素获得焦点时的样式! */
:focus {
outline: 0;
}
/* 特殊文本的样式! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 细线表格样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}

大家都知道要绝对定位一个元素的话,首先要使它的父元素定位,例如设置一个position:relative,这样子元素才可以absolute,然后top,left定位.

于是我就想,这样太麻烦了,我干脆给所有的元素都设置position:relative算了,然后要绝对定位的改一下position:absolute.这样免得挨个设置了,直接所有元素都可以绝对定位了.

于是本文所说的问题来了,我们给所有元素都设置了position:relative,于是table出问题了,所以说这种做法是不可取的,而且这样会引起一些其他的渲染问题,记得我在好几个地方都看到提示说不能这样设置.

本文其实是想说layout的,可是这个问题的确是ie的bug,不是layout问题,下次等我再遇到layout问题再说layout吧.顺便说一下,这真是一个奇怪的bug.

bug · ie · table · 折叠

效果和源码:(本代码使用了本人自己的js框架,自己修改代码的话,请务必引用我试用的框架,否则会出现错误)

(请务必试用非ie浏览器浏览,极力推荐Safari和chrome,其他浏览器运行速度堪忧)

http://www.beiju123.cn/blog/wp-content/uploads/2010/02/canvas-demo.html

1.什么是canvas:

引用Firefox开发者中心的一段话:<canvas> is a new HTML element which can be used to draw graphics using scripting (usuallyJavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas>implementations which we will see later in this tutorial.

注意,canvas主要是用来画图的,而不是注重动画,所以在canvas中没有帧的概念,没有精灵(Sprite)的概念,flash中的概念在canvas中很多都不存在.

canvas说白了,就是给js加了几个对象,多了几个方法.并不是一个独立的东西,应该说是JavaScript的一点点补充.就跟其他编程语言中的graphic对象差不多,提供了画基本图形和路径,图像,提供了颜色和样式管理.

更多关于canvas的基础,见https://developer.mozilla.org/en/Canvas_tutorial(英文版)

可能很多人会嚼的我这篇文章纯属多余,既然能够画图,那加上一个定时器不就是动画了嘛?

是的,如果你只是想在画布上画出一个圆或者矩形,然后让它动起来的话,那这么做无疑是可以得出结果的.代码也很简单,如下:

var x=0;
    var y=0;
    var ctx = document.getElementById('canvas').getContext('2d');
    setInterval(function(){
        ctx.clearRect(0,0,800,800);//清除画布某某个范围内的内容,参数分别为x,y,宽度,高度
        ctx.fillStyle = '#FFF'//设置颜色
        ctx.fillRect(x++,y++,50,50)//画一个矩形,参数为:x,y,宽,高
    })

效果就是一个方块在画布上向右下角移动.

动画往往不是如此简单,在flash里,复杂的动画里会包含很多元素,有剪辑,有精灵,他们之间还有包含关系,我们可以单独控制某个元素的移动,控制速度,控制属性.flash里有帧,我们可以在帧上放置元素,控制帧速.最重要的,做复杂的动画的时候,我们需要把每个元素抽象成一个完整的对象,例如:一个人对象啊,我们需要控制它走动,控制它攻击.

可是在canvas里面,图形并不是一个对象,在整个canvas元素里,有且只有只有一个画布的对象(多次创建的话,只会创建一个引用),如果想把里面的图形作为对象来控制的话,上面的动画方法就做不到了.这个时候,考虑一下flash的工作原理,我想出了如下的解决方案.

我们现在需要一种新的方法,这种方法可以让画布上的元素变成可以单独控制的对象.而画布上其实只有一个对象,怎么让它能承载多个动画对象呢?

我们想想flash的工作原理吧,flash中最基本的两个东西,一个是帧,一个是精灵(Sprite).下面我们就给我们的动画程序添加这两个概念.

首先是帧,我们通过一个定时器,每隔一段时间就重画一下画布,在这段时间里我们改变画布上的元素的位置,这样就是最基本的帧了.

然后现在问题就是如何控制画布上元素的属性呢?我们把画布上所有要用到的动画元素都抽象出来,每个元素都抽象成一个对象,这个对象拥有位置和大小,速度等信息.然后在每一帧重画画布的时候,我们遍历这些对象,调用它们自己的draw方法,让它们根据自己的属性把自己画到画布上.我们将这些元素统称为Sprite,也就是动画精灵.

现在,我们就可以控制这些动画元素了,因为它们都被抽象成了对象,可以有自己的属性和方法,他们都要实现一个接口.虽然在js中不存在接口的概念,但是我们要自己去衡量在每个扩展的精灵里是否都实现了接口的方法.因为这些方法都是必须的.我们把这个接口定义成如下的样子: (全文…)

canvas · flash · html5 · 动画

朱 照华, 程序员, 自由职业者

2009 年 11 月 19 日

本文介绍了使用 Cufon 进行网页字体渲染的一般方法和技巧，并以此为基准，介绍了 Cufon 技术的主要实现原理和这一原理的可能应用领域

这是一篇关于 Cufon 技术的小文章。什么是 Cufon 呢？简单的说，Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。

那么为什么要使用 Cufon 呢？这要从 Web 开发人员，所经常面对的一种“冲突”，即“字体（Font Family）冲突”开始讲起。

通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。

如下图 1 所示，是某设计者为公司 A 所设计的一个公司简介页面（部分）。在其中为了突出公司的“亲和力”，设计者使用了一种名为 Baroque Script 的手写字体。

无疑的这一设计将会让开发人员“抓狂”。因为与此同时，A 公司雇主明确的告诉了开发人员，公司简介的内容需要可以通过后台管理程序进行修改，并实时的显示到相应的页面上。

这也就意味着，即使开发人员可以如下代码所示通过编写脚本，来实时输出公司简介的内容，并指定这一内容使用“Baroque Script”字体进行显示，也是无法“完美”的实现设计初衷的。

 <style>
  .introduction { font-family:'Baroque Script';}
 </style>
……
 <p style="font-size:36px"><?php echo $introduction; ?></p>
 <p style="font-size:24px; text-align:right">
 <?php echo $leader;?></p>

因为在大部分的浏览器上，并不会安装有 Baroque Script 字体。因此在这些浏览器上系统会主动“忽略”掉代码中关于 font-family 的说明，转而使用缺省字体进行输出，如下图 2 所示。

当然随着 Web 标准的发展，关于这一问题现在也已经有了一个“官方”的解决方案，那就是通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体，如下代码所示。

……
 @font-face {
  font-family: "Baroque Script";
 src: url('BaroqueScript.ttf')
 }
……

完整的实现则可以参考范例 1.htm。显然的，这一解决方案会成为今后在此类问题上一个主流的处理方法。但是不幸的是，截止到目前为止其却并没有获得很多浏览器，尤其是 IE 系列浏览器的完整支持。而与之相较本文所将介绍的 Cufon 方案，目前在“普适性”上较 @font-face 方案则是要广泛许多，下表 1 则给出了二者在浏览器支持方面的一个比较，以供读者参考。

那么面对这一冲突，Cufon 究竟是如何解决非缺省字体显示的问题的呢？

回页首

引入 Cufon

作为一种基于 JavaScript 的网页字体引入方案， Cufon 的核心功能是通过一个名为“cufon-yui.js”的 JavaScript 类库，提供给开发人员的。因此使用 Cufon 技术的第一步，当然就是在 Web 页面中引入这一类库，如下代码所示。

 <script src="cufon-yui.js" type="text/javascript"></script>

创建并引入字体文件 (全文…)

html · js · 字体 · 网页

微软反盗版全球黑屏 中国成惟一例外 
昨日凌晨，微软发布消息称，2 月17日将发布针对“Windows激活技术”的更新，以验证用户使用的操作系统是否为正版。非正版用户若安装该更新，30天宽限期过后，电脑桌面壁纸将 变为黑色。但微软相关负责人同时表态称，中国市场是“惟一的例外”，尚不会通过Windows Update来要求用户下载安装这一更新。
“Windows激活技术”是一套内置于Windows 7和Windows Vista中的激活与验证技术，用来确认安装在电脑上的Windows是否是正版，并将允许用户有30天的激活宽限期，在这30天之内，用户可以随时激活 Windows系统。30天的宽限期之后，用户如果没有激活产品或者激活失败，系统会发送通知和提醒，同时电脑桌面壁纸将变成黑色，从而提醒用户需要激活产品或获取正版授权。

微软全球正版Windows部门总经理威廉姆斯说，这项更新以服务的方式提供，旨在保护正版用户和合作伙伴免受盗版软件的危害。2月底，微软的这一更新将通过Windows Update在全球发布。

但这一政策却单单将中国市场排除在外。“中国市场是全球惟一的例外。”微软中国消费与在线市场部总经理韦青表示，2月17日起，微软在中国市场并不会通过Windows Update来要求用户安装这一更新，而是将其放在微软的官方网站上，希望下载安装的用户可自行登录网站下载安装。“中国市场很重要，我们想留出时间来做市场宣传，培养用户认知。”韦青表示，这一更新行动在中国将会推迟，具体时间仍待定。

2008年，微软曾在中国市场发起一次“黑屏反盗版”行动。这一举措引起了中国用户的强烈不满，不少IT评论人士和网友认为微软产品定价过高，并质疑其不适当地控制用户电脑。

“微软将会在春节后发起一个大规模的市场宣传活动。”韦青称，对于购买与使用正版的中国用户，微软将考虑推出更多的优惠政策与服务。微软中国Windows 7商用市场总监包嘉峰表示，正版的用户可以下载微软免费防恶意软件服务Security Essentials，并可在Windows 7下使用XP模式，这些都是盗版用户所享受不到的。 

《北京日报》

微软 · 盗版

话说以前我转过一片文章,讲的是 JavaScript中||和&&的妙用,网址是

http://www.cnblogs.com/mars-bird/archive/2009/10/23/1588406.html

第一段代码就是强调一下这个用法,我在我的项目中使用了一个switch,后来我发现这样的代码好丑,于是我就写成||&&形式的,

后来测试性能的时候,发现性能竟然上了一个数量级,可见这种写法在某些情况下可以增加性能,但是我并不确定是何种情况才能提高性能,因为我测试在通常情况下switch和||&&的性能是差不多的.

原来的代码:

switch(this.now_char=this.str.charAt(this.index)){
                    case "/":
                        if(this.handleNote()) continue;else this.str2+=this.now_char;
                        break;
                    case "\"":
                    case "\'":
                        if(this.handleStr()) continue;else this.str2+=this.now_char;
                        break;
                    case "\n":
                        if(this.handleLine()) continue;else this.str2+=this.now_char;
                        break;
                    case "{":
                    case "}":
                        if(this.handleDepth()) continue;else this.str2+=this.now_char;
                        break;
                      case ":":if(this.handleJson()) continue;else this.str2+=this.now_char;break;
                    default:
                        if(this.handleKeyword()) continue;else this.str2+=this.now_char;
                        break;
 }

改写后的代码,功能当然是一样的

(this.now_char=="/"&&(this.handleNote()||(this.str2+=this.now_char)))||
((this.now_char=="\""||this.now_char=="\'")&&(this.handleStr()||(this.str2+=this.now_char)))||
(this.now_char=="\n"&&(this.handleLine()||(this.str2+=this.now_char)))||                       ((this.now_char=="{"||this.now_char=="}")&&(this.handleDepth()||(this.str2+=this.now_char)))||
(this.handleKeyword()||(this.str2+=this.now_char))

我嚼的第二种写法更简洁点,||&&还有很多用处,可以看那篇文章的介绍

第二段代码是利用了一个特性:

(ele=document.createElement(“div”)) ;//这个表达式会返回一个dom元素,赋值的同时会把值返回给外边的括号

于是出来下面这段代码 :

var mixin=function(target,options){
        for(var i in options){
            target[i]=options[i]
        }
    }
    var ele=null;
    mixin(ele=document.createElement("div"),{
        id:"aa",
        className:"bb",
        innerHTML:"sss"
    })
    document.body.appendChild(ele)
    debug(ele.id)//aa
    debug(ele.className)//bb
    debug(ele.innerHTML)//sss

这段代码是因为我实在厌烦了建立一个dom元素的时候的一大堆语句:
var ele=document.createElement(“div”)
ele.id=”aa”;
ele.className=”aa”
ele.innerHTML=”sss”
等等等等,好烦啊.
于是出来了上面的代码.
用上面的原理还可以这样写代码
(ele=document.createElement(“div”)).className=”aa”;
感觉是不是节省了一点空间呢,上面这句话节省了一个变量名,呵呵.

&& · js · || · 技巧

今天早晨起得有点晚,起来之后发现自己房间的锁坏了,怎么转它都没反应,卧槽,不是吧,我被自己锁在屋子里了.

我现在作为一个成功把锁开开的人给大家讲述遇到这种情况应该怎么办.
首先,我想到了踢门,我踢,我踢,可是门不是我的,我不敢使劲,即使我使劲了,恐怕也踢不开啊,而且我想到了电影里那些人踢开门的一瞬间的样子,貌似门都是整块倒在地上,中间还有个洞,到时候房东会杀了我的.
之后,我想到了google(百度的弱势体现出来了,我在百度搜的有用信息太少了,全是开锁公司的广告).我google了一下,首先知道了,我那把锁的学名叫做”球锁”,可以手工卸开,在球锁的脖颈的地方有一个小孔,用坚硬的小螺丝刀使劲按下去,然后一拔,就卸开了.可是我没有小螺丝刀啊,我只有一个很大的螺丝刀,其他工具一概没有,还有个老婆留在这里的发卡,我把那根发卡搞的歪器咧八,这玩意太软了,而且空间不足,使不上劲.卧槽
继续google:”开锁公司”.突然我想到外边的大门还锁着呢,开锁的进不来.卧槽
然后我吃了点东西.上了会网,给公司打了个电话说我去不了了.给房东打电话,房东手机停机了,房东要晚上回来,到时候估计我小弟弟憋不住了.
临近中午,我突然想到,我可以把门框卸下来啊,然后用高中时的方法,插一张饭卡进去,这是从里面查,那肯定是百插百中啊.于是我用那大螺丝刀把房东的可怜的门框卸了下来,饭卡插进去,piapia.门开了
卧槽.我终于可以去上厕所了,憋死我了.
期间有人提议我打110,112之类的,跟他们说我煤气泄漏,让他们从窗户里进来,额,这个太缺德了.
我最终在google和自己的思考的帮助下,终于越狱成功了.下午又要去上班,╮(╯▽╰)╭

2010年2月3日12:31:42 记

开锁

北京时间2月2日下午消息，据国外媒体今日报道，微软将对Windows 7 RC版(最终预览版)启动杀手锏，用户要么付费购买，要么就要忍受自动关机之苦。
北京时间2月2日下午消息，据国外媒体今日报道，微软将对Windows 7 RC版(最终预览版)启动杀手锏，用户要么付费购买，要么就要忍受自动关机之苦。
从2月15日开始，Windows 7 RC将每隔数小时显示警告通知提醒用户付费购买。从3月1日，运行Windows 7 RC的电脑将每隔2小时关机一次，关机前并无警告。
微软发言人布兰登·莱布兰克(Brandon LeBlanc)在官方博客中称：“为了避免数据丢失，我建议用户尽快安装不会过期的Windows 7版本。因为在自动关机的过程中，你的工作无法被保存。”
自动关机将一直持续到6月1日，此后微软将替换用户桌面，在右下角任务栏中显示“此版本的Windows不是正版”的通知。这将意味着还在使用Windows 7 RC的电脑无法获得可选更新，或者下载需要Windows认证的软件。
要避免这种情况，用户必须购买并重新安装Windows 7 RC。但此前微软曾表示用户可以直接从Windows 7 RC版本升级到正式版本。

win7 · 免费 · 收费 · 盗版

去年就想将IE的bug系统地整理下，但一直都忙于工作、学习没有完成，看到这篇E文后，我毫不犹豫的放下了手中的工作将之翻译出来。

由于是第一次译文，所以错误在所难免，欢迎大家批评指正。

原文：Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

翻译：http://www.vfresh.org/w3c/727(译文对原文进行了补充)

对IE6最好的策略就是不去兼容它。

好吧，我知道你的难处，你不得不去兼容IE6这个狗血的浏览器，因此不得不在兼容IE6上花费很多时间。对此，我颇有同感，来让我来帮助你吧。

我不会象许多文章那样让你去抵制IE6，这并不会帮助到你(迫不得已时)去兼容IE6；因为IE6依旧占有一定的市场份额，你无法放弃IE6。本文将帮助你来解决这个难题。

我查阅过很多资料来摘录这些解决方案（有些是我自己提供的），现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks，并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误，请联系我。

bug · css · ie · ie6 · 前端 · 备忘