浏览器派对~~

为了进行浏览器兼容,我们需要关注每一个浏览器,甚至每一个浏览器的版本之间的差别, 以及不同操作系统下不同浏览器的差别。

image

俺windows下的所有浏览器…

分类:Note | 固定链接 | 评论: 30 | 引用: 0 | 查看次数: 2578

firefox 3.1 beta的机器人

3.0开始mozilla就喜欢玩机器人了,不过firefox3.0这个机器人显得比较复古。看看3.1的机器人吧,估计开发最近在看Gundam?

image

http://www.mozilla.com/en-US/firefox/3.1b1/whatsnew/

 

查看更多...

分类:Web Design | 固定链接 | 评论: 4 | 引用: 0 | 查看次数: 1090

基于Canvas的在线绘图工具

image

注意,不是基于flash的哟。Pixastic 能够实现一些简单的滤镜和绘画,当然最厚道的是作者还提供了每个特效渲染的源代码:P 打算学习Canvas的朋友不要错过哈。

 

IE就免打开下面的网址了

查看更多...

分类:Javascript | 固定链接 | 评论: 4 | 引用: 0 | 查看次数: 1683

FireUnit - 基于firebug的单元测试工具

getClientRects 和 getBoundingClientRect 的区别

TextRectangle

对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释。

看下图(截图来源ppk):

200812181810.jpg
一行连续的文本

200812181810.jpg
我们可以获取到里面的5行文字,红色框就是TextRectangle这个抽象的对象.

TextRectangle对象包含了, top left bottom left四个属性,这四个属性都是对应可视区域viewport的
200812181810.jpg

理解TextRectangle后,对getClientRects和getBoundingClientRect可以得到一个更好的说明.

getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象。

浏览器差异:
除了safari,firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect,
firefox 3.1给TextRectangle增加了 width 和 height。

ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。

使用场景:
现 在用得最多的是getBoundingClientRect,这个直接返回一个TextRectangle,其实大家经常使用它来获取到一个 element的viewport坐标.其实就算dom里面没有文本也能返回一个 TextRectangle. 这样就不需要向上遍历来计算对象的相对坐标了。

Tags: TextRectangle

分类:Javascript | 固定链接 | 评论: 7 | 引用: 0 | 查看次数: 6125

IE8 支持 Alternative style sheets

什么是Alternative style sheets?这是用来让用户自己可以轻易切换的样式的接口,简单的说就是可替换样式表

 

用户如何使用呢?

请先用firefox体验下面的网址

http://www.w3.org/Style/Examples/007/alternatives

查看更多...

Tags: css

分类:Web Design | 固定链接 | 评论: 5 | 引用: 0 | 查看次数: 1492

ie6 focus 历史链错误的Bug

这个也不知道怎么描述好一些,但是大致情况是这样的。空间这段时间在IE6下总是遇到一些输入框无法聚焦的问题。通常问题出现在对话框上面。


当打开一个Div对话框后(对话框内是个Iframe),IE6用户的鼠标点击有时无法聚焦到输入框内。 这时只要用脚本强制 focus 一次,这样强迫浏览器重新建立一个focus历史的记录。

但是问题产生了,强制focus后的输入框如果直接使用 removeNode 方法清除掉后,页面上所有输入框都也无法准确聚焦了... - -!!!

初步猜测,IE在用户操作输入框的时候,希望把上一个聚焦的输入框或焦点Blur. 但是IE却因为 removeNode 后没有作记录,就一直找不到这个历史。

解决办法是在removeNode之前,先把对话框Div的innerHTML清空让后再remove,这样ie6就能够很好地回收和初始化一些资源。
分类:Javascript | 固定链接 | 评论: 9 | 引用: 0 | 查看次数: 1244

JavaScript Inheritance via Prototypes and Closures

SmartMarkUP 一个轻量的在线代码编辑器

123SmartMarkUP 是一个轻量的Markup 编辑器,根据官方介绍它能够支持HTML, CSS, XML, Wiki syntax, BBCode等MarkUp语言. 

不过在官方的截图上看貌似还可以支持代码高亮,不过实际的例子中没有发现对应的功能。或许会在插件上做支持吧。

刚好也在打算重新编写一个新的编辑器,就研究一下吧。

感兴趣的朋友也可以到 http://www.phpcow.com/smartmarkup/ 上面体验

查看更多...

分类:Javascript | 固定链接 | 评论: 5 | 引用: 0 | 查看次数: 2290

真人版《七龙珠》预告片~~~ 囧