IE6 reflow bug

2006.07.2612:21

最近遇到的一个 bug,在利用 relative/absolute 定位方式布局的页面里面,经常会出一些类似问题。大概描述一下:一个 relatively positioned 容器 A ,里面放有一个 absolutely positioned 容器 B。如果在页面渲染结束之后 A 由于因为某种原因尺寸发生了改变(这种改变是一种被动的改变,例如由于内部内容的增加减少引起的撑大或者缩小等),这种改变可能是由 JavaSciprt 或者 :hover 等造成,那么 B 元素有些时候(不是全部)在某些版本的 IE 中不会根据 A 元素新的尺寸来重新计算位置。

IE5 似乎没有这个问题,IE6 有,我的 IE7 还是 beta2,版本号是 7.0.5346.5,也没有这个问题,一个朋友用的 beta3 版本号是 7.0.5450.4 居然说也有问题,我没有测试,用这个版本 IE 的朋友可以帮忙看看。最后还算不错,折腾出一个解决方式,用一段 JavaScript 脚本让 IE reflow:

function reflow(){
  var b = document.body;
  b.style.zoom = b.style.zoom=="1"?"100%":"1";
}

原理就是对 zoom 重新赋值让 body reflow,当然 reflow 的方法应该很多,只要让 IE 可以重新计算就成。这里使用 zoom 的方式是因为它不会有什么视觉上的改变,唯一的变化就是添加了 layout, 但 body 默认是有 layout 的,所以 zoom 的使用应该没有什么大的负作用。

可能光看文字看不大清楚,我这里简单做了一个例子(请用 IE6 查看)来形象一点说明这个 bug,其中第一种情况是由于 JavaScript 引起的改变,第二种情况是由于 :hover 引起的改变,两种情况最后都是用的 js 脚本解决的问题。个人感觉这种方法比较 ugly,不过 google 没找到什么相关的东西(可能我不会找),只好先凑合用了,不知谁有更好的解决方法。

random things

2006.07.2306:43
  • CSS Browser Selector,通过一个 JS 判断用户的浏览器类型,来给<html>元素添加 class。之后就可以在 CSS 中利用形如 .gecko .mydiv{} 的方法来给 gecko 写专门样式了。

    不过它判断的是浏览器发送的头信息,要知道这个信息是可以伪装的……

  • Javascript Sound Kit,又一个利用 Javascript 和 Flash 结合的应用,给网页中添加音效。

  • 前段时间的项目发现,关于使用 11px 的 Mingliu 字体,各浏览器都有些不同。
    IE:如果未指定语言(lang 属性),使用utf-8 就可以使用 Mingliu 字体,如果 html 中指定了语言为 zh-cn,那么使用 utf-8 也不行,只有另行再赋值 zh-tw(或 zh-hk) 到特定元素的 lang 属性才行,而对于 IE5,我测试的是要把字体加一号,font-size 设置为 12px 才行,奇怪;
    Opera:必须要指定语言,编码设成 utf-8 没什么用,不过 big5 倒是可以,但我们做网页不是 gb2312 就是 utf-8 了,一般也不会用 big5;
    Firefox:无需额外设置就可以直接使用。

    结论:看来还是 Firefox 轻松一点,不过对其他各家浏览器的处理不是很明白,用什么字体和选什么语言也有这么大的关系么?

JavaScript Sockets?

2006.06.2210:33

在 Ajax 大行其道的今天,对各种 push 技术,keep alive 方法的研究很多,目的其实都一样——实时信息传递,但 JavaScript 如果能实现真正的 sockets,对 web 应用绝对是如虎添翼。今天在 Ajaxian 上看到消息,有人实现了 JavaScript 的 sockets 连接,不过这个实现不是 js 原生的,而是借用了 Flash 的 sockets 能力与之结合,绕了个弯,虽然还比较粗糙,但不断完善未尝不能开辟一片新天地,值得关注。作者提供了demo源码,似乎使用的是 Flash 的 FS Commands 进行连接,还没细看,但 Flash8 中已经提供了更强劲的 External API 和 Javascript 交互,这对传统 web 应用 (HTML+JS) 充分利用 Flash 的优势提供了更多方便。RIA 中向来 Ajax 和 Flash 是两个阵营,各有各的支持者,各有各的用武之地,不过二者结合也应该很有搞头的,要多多扩展思维,比如这里利用了 Flash 的 sockets 能力,比如 AFLAX 利用了 Flash 的绘图和多媒体等能力等等。

相关阅读:

random things

2006.06.2015:13

UFO v3.10

2006.06.0807:59

UFO(Unobtrusive Flash Objects) 又一个 Flash 版本检测和嵌入脚本,除了 Adobe 官方的 JS 脚本和 SWFObject 之外,又多了一种选择。这是一个开源项目,osflash上的描述

  • UFO automatically performs major version and build version (sometimes called minor version) tests, based on the Flash movie’s publish settings. This means that you can reuse UFO to embed multiple Flash movies that are published for different plug-in versions. All tests should be future-proof.
  • UFO is easy to use. It only takes 4 simple steps to build a Web page that contains an unobtrusive Flash movie. UFO also uses a user-friendly mechanism using property name:value pairs to pass in any amount of parameters in any order you want to.
  • UFO is as standards compliant as it can be. Your (X)HTML pages will pass the W3C validation tests, because UFO generates the Flash object’s (X)HTML code with JavaScript. However all non IE/Win browsers do receive a piece of (X)HTML code containing the proprietary embed element.
  • UFO scores high on accessibility.
  • UFO is unobtrusive. This means that all (X)HTML, CSS and JavaScript code is fully separated from each other. UFO uses cross-browser load events and you can just add UFO to your existing pages without overwriting existing onload events.
  • UFO follows the principles of progressive enhancement. You build your Web page as if a user doesn’t have the required Flash plug-in support, using semantic and search-engine-friendly content. UFO will automatically replace this content when there is sufficient JavaScript and Flash plug-in support.
  • UFO is fully recycable. You can reuse UFO to publish different Flash movies, targeted at different Flash player versions and with a different set of attributes and parameters.
  • UFO supports Macromedia’s express install feature.
  • UFO supports MIME type application/xhtml+xml.

当前最新版本3.10更新历史

random things

2006.06.0321:45
  • 前段时间 Firebug 这个 Firefox 扩展升级到0.4版,加入了一个 debugger 和其他若干更新,这里是使用文档。刚发现了一个视频教程,来自 Digital Media Minut,很不错,看了以后应该可以很快上手 Firebug 了。

  • Firefox 2 的开发者文档出来了,内容在不断添加中,支持 Javascript 1.7,这里关注

  • André Michelle 公开了他的二维物理运动引擎 Revive 的源码。

sIFR 2.0.2 Final Release

2006.05.2718:26

Flash 通过 JavaScript 和 HTML 结合应该有很多可以发掘的应用,sIFR无疑是很成功的一种。前两天还见到一种利用 Flash 给 HTML 中的页面元素添加音效的网站,也蛮有意思的,记得以前我还用 Flash 实现过一个圆角矩形的应用。要说 Flash 在多媒体方面的性能那是要强过 HTML 很多,对于图形文字等传统 HTML 媒介的处理也灵活很多,现在又有了 ExternalInterface 等利器可以轻松的和 JavaScript 之间交互,所以多多琢磨一些好的应用一定会给网站增色不少。

更多信息:

random things

2006.03.3009:26
  • X-ray,一个firefox extension,用于在页面上显示使用的html标记,比如一个段落就会在最终渲染的页面前后加上<p>和</p>,很直观,相当好用。记得Flash有个很猛的利用sharedobject的调试工具,也叫Xray,呵呵。
  • lightbox 2.0发布,增加了图片组,外加一些华丽的效果,说是向下兼容。个人觉得lightbox虽然蛮炫也挺实用,只是用户体验感觉不是很好……
  • domEL(),一个很不错的javascript custom function,用于方便的创建dom元素。
  • prototype javascript window,基于prototype和script.aculo.us的一个小应用,用于在页面上弹出一个小“窗口”并显示特定内容,比如可以用来调试javascript。
  • flash实现的凹凸帖图,强大。
  • 一个在线查看pagerank的工具,firefox有extension可以用。
  • CSS历史,一篇博士论文…
  • 用上了hoekey,体积小巧功能强大的快捷键设定工具,相见恨晚。
  • Tooooold Search,daizisheng整的一个bbs搜索工具,有点意思。

AFLAX ?

2005.11.2409:44

AFLAX: A JavaScript Library for Macromedia’s Flash™ Platform
一个opensource的项目,不需要Flash IDE,直接用javascript通过Flash8新增的ExternalInterface在页面上开发flash应用。
Download library | Download sample media files | online API documentation
这里是一些demo(需要 FlashPlayer 8 支持):

AFLAX allows developers to use most of the Flash 8 platform, including drawing commands, filters,video, and much more. Here are some simple demos, and I’ll be adding more each week.Note that there are no hidden tricks here–the demos are using nothing but JavaScript, a small Flash “bootstrap” file, and a few graphic resources (depending on the demo being shown):

General demos:

Drawing demos:

Image Processing demos: (Note: Some of these demos are CPU intensive as they perform real-time effects.)

Audio demo:

Video demos:

关于ExternalInterface具体可参考Flash8的帮助文档或MM的livedocs

ExternalInterface 类也被称为 外部 API,是一个新的子系统,通过它可以在 ActionScript 和 Flash Player 容器与具有 JavaScript 的 HTML 页或嵌入 Flash Player 的桌面应用程序之间轻松进行通信。

JavaScript and Flash Integration Kit

2005.06.0800:08

The JavaScript and Flash Integration Kit allows developers to get the best of
the Flash and HTML worlds by enabling JavaScript to invoke ActionScript functions,
and vice versa. All major data types can be passed between the two environments including:

  • objects
  • arrays
  • strings
  • numbers
  • dates
  • booleans
  • nulls
  • undefined

Additionally, the JavaScript and Flash Integration Kit works on all major browsers and platforms

You can find the latest information and download the latest version from:

http://www.macromedia.com/go/flashjavascript

This project was created and written by Christian
Cantrell
and Mike Chambers at
Macromedia.

可以方便实现如下通讯

  • Calling an ActionScript function from JavaScript
  • Receiving a function call from Flash within JavaScript
  • Calling a JavaScript function from ActionScript
  • Receiving a function call from JavaScript within Flash

download: from Macromedia