做完了上次那个音乐征集系统的投票平台，又积累了些新的东西。因为投票平台的一些设计这么早发出来不大好，所以就先发一个发现~
IE 的 Bug 已经说太多了，今天转过来，看看这次做的过程中发现的一个 Firefox 的 Bug~这个 Bug 的触发条件我已经初步探明了。
考察下面这个 HTML 文件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Bug of Firefox</title> <link media="all" href="a.css" type="text/css" rel="stylesheet" id="test" /> <style type="text/css"> body { background: #ccc; } #x { float: left; height: 3em; width: 10em; margin-right: 1em; } </style> <script type="text/javascript"> var t = 0; function $(id) { return document.getElementById(id); } function doit() { t = (t + 1) % 2; var $x = $('x'); $('test').href = ['a.css', 'b.css'][t]; style = window.getComputedStyle ? window.getComputedStyle($x, null) : $x.currentStyle; $('back').innerHTML = style.backgroundColor; $('color').innerHTML = style.color; } </script> </head> <body> <div id="x" onclick="doit()">Hello!</div> background: <span id="back"></span><br /> color: <span id="color"></span> </body> </html> |
下面考察两个 CSS 文件：
1 2 3 4 5 | /* a.css */ #x { color: #000; background: #fff; } /* b.css */ #x { color: #fff; background: #000; } |
很明显，这个页面就是点击那个 div，然后交替变换样式表，这就是我做网页即时换肤的重要方法。那么这有什么问题呢？
问题就在，第一次点击那个 div 后。我们先猜测一下，第一次点击那个 div 后，background: 后面应该出现 #000 或一个与其等效的颜色值，而 color: 后面则应该出现 #fff 或一个与其等效的颜色值。下面我们来看一下结果：
上面这些截图从左到右从上到下依次是：Firefox 3.5.7 for Ubuntu、Chromium 5.0.320.0 for Ubuntu、Opera 10.00 for Linux 和 Internet Explorer 6.0.2800.1106。可以非常明显的看出，除了 Firefox，其他几个浏览器都返回了完全正确的结果！Firefox 啊 Firefox……
不知道这个 Bug 有没有人发现并提交过呢？反正这个 Bug 以我的英文水平我肯定是描述不清楚的……哪位大大帮我提交一下吧，谢了嗯~
不过这个 Bug 是否仅在 Linux 版出现我还不是非常清楚，甚至是不是仅仅在我的机子上出现，我都不了解……因此各位用 Firefox for Windows 的人也可以测试一下。
经过测试，Firefox 3.6 for Windows 也存在这一 Bug，看来是没人提交过……
我已经向 Mozilla 提交了这一 Bug：Bug 545636，不知道表达的好不好……
此 Bug 已经被标明无效，原因是一名开发者发现在远程的情况下 Opera 和 Safari 等其他浏览器给出了同 Firefox 一样的结果，而导致这种结果的原因在于在异步的文件请求还未处理完成的情况下立即要求所需值。
经过实验，如果远程访问，并且样式表与网页分离的情况下，似乎各个浏览器都会出现类似问题，即因为异步访问照成延迟。但当测试一个人提交的将样式表嵌入网页的版本后，Chromium 会偶然出现反馈错误，Firefox 总是出现错误，Opera 没有出现错误……我毛估 IE6 不支持那种写法，就不测试了。但在本地测试的情况下，永远只有 Firefox 出错。
我想这或许正如那个开发者所认为的，不能算是 Bug，但这至少说明 Firefox 在某些位置的效率也是差到一种境界了……
关于 IE6 非标准的 CSS 读取方法参考了：用javascript getComputedStyle获取和设置style的原理_javascript技巧_脚本之家
Comments