ajaxbbs http://www.ajaxbbs.net 又一个 WordPress 站点 Tue, 17 Jan 2012 14:46:23 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE9报“DOM Exception: INVALID_CHARACTER_ERR (5)”错误的原因及解决办法 http://www.ajaxbbs.net/ie9%e6%8a%a5dom-exception-invalid_character_err-5%e9%94%99%e8%af%af%e7%9a%84%e5%8e%9f%e5%9b%a0%e5%8f%8a%e8%a7%a3%e5%86%b3%e5%8a%9e%e6%b3%95/ http://www.ajaxbbs.net/ie9%e6%8a%a5dom-exception-invalid_character_err-5%e9%94%99%e8%af%af%e7%9a%84%e5%8e%9f%e5%9b%a0%e5%8f%8a%e8%a7%a3%e5%86%b3%e5%8a%9e%e6%b3%95/#comments Wed, 17 Aug 2011 11:54:52 +0000 yemoo http://www.ajaxbbs.net/?p=67 升级了浏览器到IE9，今天进入公司网站后台突然发现有些页面进不去了，F12调试显示有JS错误：DOM Exception: INVALID_CHARACTER_ERR (5) ，具体截图如下：

未命名

之前各类JS错误提示中貌似没见过这个，按照提示找到错误位置代码如下：

]]> 升级了浏览器到IE9，今天进入公司网站后台突然发现有些页面进不去了，F12调试显示有JS错误：DOM Exception: INVALID_CHARACTER_ERR (5) ，具体截图如下：

未命名

之前各类JS错误提示中貌似没见过这个，按照提示找到错误位置代码如下：

QQ截图20110817114603

貌似和CreateElement有关，但是实在不明白，于是google了一把，有如下解释：http://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9

xx

原来IE9创建DOM元素的方式较之前有了改变，开始严格遵循标准的实现，不允许通过直接传入一个完整html标记的方式来创建Dom元素。

到这里，解决方法自然也明了了，对于IE9 也采用标准的方式老老实实来实现即可：如上面代码片段。

大概很多旧的JSlib都会有这样的问题了，这个是mootools旧版本的代码，先自己update一下代码吧～

]]> http://www.ajaxbbs.net/ie9%e6%8a%a5dom-exception-invalid_character_err-5%e9%94%99%e8%af%af%e7%9a%84%e5%8e%9f%e5%9b%a0%e5%8f%8a%e8%a7%a3%e5%86%b3%e5%8a%9e%e6%b3%95/feed/ 0 国内HTML5网站实践收集 http://www.ajaxbbs.net/%e5%9b%bd%e5%86%85html5%e7%bd%91%e7%ab%99%e5%ae%9e%e8%b7%b5%e6%94%b6%e9%9b%86/ http://www.ajaxbbs.net/%e5%9b%bd%e5%86%85html5%e7%bd%91%e7%ab%99%e5%ae%9e%e8%b7%b5%e6%94%b6%e9%9b%86/#comments Tue, 19 Jul 2011 16:02:18 +0000 yemoo http://www.ajaxbbs.net/?p=66 似乎这几年过来，前端在国内的发展也相当给力，记得在09年我们很多人还调侃的认为html5/css3至少要等到我们的baby都会打酱油的时候才有可能在国内应用开。然后互联网的发展速度永远都是天翻地覆，远远超出我们每个人的预想。

近几年来，从firefox开源开始，开始了一场比当初更激烈的浏览器竞争，而这一次，由于firefox，chrome的“猛烈”行动，致使一直以来靠windows+IE捆绑方式霸占浏览器天下的microsoft也不得不跟上步伐，参与到浏览器的升级大军中来。于是WEB标准的推进步伐，从xhtml1.0,xhtml1.1,XHTML2.0…到最后的html5，发展速度也远远超越了以往。目前除了仍安置在部分电脑用户上的N年前的一些浏览器(IE6,Ie7)外，新版的浏览器几乎都陆续开始提供对html5/css3越来越完善的支持，就连IE也从IE9/10也开始提供了.....

]]> 似乎这几年过来，前端在国内的发展也相当给力，记得在09年我们很多人还调侃的认为html5/css3至少要等到我们的baby都会打酱油的时候才有可能在国内应用开。然后互联网的发展速度永远都是天翻地覆，远远超出我们每个人的预想。

近几年来，从firefox开源开始，开始了一场比当初更激烈的浏览器竞争，而这一次，由于firefox，chrome的“猛烈”行动，致使一直以来靠windows+IE捆绑方式霸占浏览器天下的microsoft也不得不跟上步伐，参与到浏览器的升级大军中来。于是WEB标准的推进步伐，从xhtml1.0,xhtml1.1,XHTML2.0…到最后的html5，发展速度也远远超越了以往。目前除了仍安置在部分电脑用户上的N年前的一些浏览器(IE6,Ie7)外，新版的浏览器几乎都陆续开始提供对html5/css3越来越完善的支持，就连IE也从IE9/10也开始提供了html5/css3的部分支持。

考虑到兼容更多的用户以及windows/IE的用户量，特别是国内用户的这种特殊情况。在PC领域真正的应用html5，还是有相当大的风险，特别是对于一些用户群比较大的网站。但是好在陆续有人提出了一些兼容旧版浏览器的解决方案。于是。。一些大型的互联网公司前端团队也开始尝试着在网站上实践html5/css3技术。这不仅仅是积极推进新技术的发展，更给了更多的前端开发团队和人员更大的信心。相信现在已经有越来越多的人开始参与到html5/css3的学习和实践中来。最近自己闲暇关注一些互联网新闻和博客，注意到一些已经开始应用了html5/css3的网站，以下是一些列表，该列表我会不断去做更新。

支付宝：http://www.alipay.com

支付宝在html5的应用方面应该是更彻底的一个了。其中还有一个很值得学习的我觉得是img lazyload的思路。

淘宝：http://www.taobao.com

淘宝是最早开始应用html5的大型网站了。淘宝前端团队还是要赞一下的。

腾讯拍拍：http://www.paipai.com

无意中发现拍拍也开始用了html5，非常不错～

]]> http://www.ajaxbbs.net/%e5%9b%bd%e5%86%85html5%e7%bd%91%e7%ab%99%e5%ae%9e%e8%b7%b5%e6%94%b6%e9%9b%86/feed/ 4 开始学习PHP，从研究DEDECMS源码开始 http://www.ajaxbbs.net/%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0php%ef%bc%8c%e4%bb%8e%e7%a0%94%e7%a9%b6dedecms%e6%ba%90%e7%a0%81%e5%bc%80%e5%a7%8b/ http://www.ajaxbbs.net/%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0php%ef%bc%8c%e4%bb%8e%e7%a0%94%e7%a9%b6dedecms%e6%ba%90%e7%a0%81%e5%bc%80%e5%a7%8b/#comments Sun, 27 Jun 2010 20:36:42 +0000 yemoo http://www.ajaxbbs.net/?p=65 DEDECMS是一个国人开发的著名的PHP CMS系统，两年前就有所关注，貌似当初还是一个人做的，现在已经运作成一个公司了。这些先不管，但这个产品的功能自己这几天也安装了最新版尝试了一下，还是非常强大的，绝对的优秀CMS产品（如果自己以后也能做出这么一款牛B的产品就好了，呵呵）。使用DEDE，可以完成几乎各类站点的需求，只需要做套模板即可，功能上DEDE已经是很完备了。

以前自己一直打算好好学习下PHP，但是一直都是半死不活，现在PHP仍然只能算作一个新手吧。因为一直没有做过很多具体的完整php网站或项目，所以总觉得不够深入。好在学习程序语言有个好办法，就是阅读相关优秀产品的源代码，现在很多优秀的PHP产品代码都是开源的，这给想要好好学习PHP的人来说真是一个福音。我就从阅读DEDE源码和了解DEDE思想和功能开始，一者更深入了解DEDE的使用，二者提高自己的PHP水平。从今天，坚持不断的阅读DEDE的源码，不断学习和总结PHP知识，了解DEDE设计思想。

相信不久的时间以后，自己也可以信心十足的去做一些PHP的网站或者产品了。

]]> http://www.ajaxbbs.net/%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0php%ef%bc%8c%e4%bb%8e%e7%a0%94%e7%a9%b6dedecms%e6%ba%90%e7%a0%81%e5%bc%80%e5%a7%8b/feed/ 2 非常全面的实用JavaScript开发工具列表(二)【转】 http://www.ajaxbbs.net/%e9%9d%9e%e5%b8%b8%e5%85%a8%e9%9d%a2%e7%9a%84%e5%ae%9e%e7%94%a8javascript%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e5%88%97%e8%a1%a8%e4%ba%8c%e3%80%90%e8%bd%ac%e3%80%91/ http://www.ajaxbbs.net/%e9%9d%9e%e5%b8%b8%e5%85%a8%e9%9d%a2%e7%9a%84%e5%ae%9e%e7%94%a8javascript%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e5%88%97%e8%a1%a8%e4%ba%8c%e3%80%90%e8%bd%ac%e3%80%91/#comments Thu, 31 Dec 2009 14:22:54 +0000 yemoo http://www.ajaxbbs.net/?p=63 HTTP监控

Fiddler

Fiddler是一种Web调试代理，它记录你的电脑和网络之间所有的HTTP(S)流量。可以用Fiddler检查所有HTTP(S)流量，设置断点，干涉进来或出去的数据。

TamperData

TamperData是一个追踪并修改http/https请求的Firefox扩展。可以用它做基于网络的应用程序的安全测试，追踪请求/回应。

... ]]> HTTP监控

Fiddler

Fiddler是一种Web调试代理，它记录你的电脑和网络之间所有的HTTP(S)流量。可以用Fiddler检查所有HTTP(S)流量，设置断点，干涉进来或出去的数据。

TamperData

TamperData是一个追踪并修改http/https请求的Firefox扩展。可以用它做基于网络的应用程序的安全测试，追踪请求/回应。

Live HTTP Headers

可以在浏览的时候查看网页的HTTP headers。可以用Live HTTP Headers调试网页应用程序，找出远端网站使用的是那种网站服务器，或者查看远端网站发送的小数据文件。



文件

jGrouseDoc

jGrouseDoc可以从源代码中的注释生成API文件。你可以用这个工具记载你需要的所有构造——不仅有函数和变量，还有类文件包，界面，命名空间，包和其它。使用那种JavaScript框架是无关紧要的——你可以不采取框架或工具强加的方式而以自己希望的方式记录代码

JSDoc Toolkit

JavaScript的一种文件产生器，以JavaScript形式写成；它自动从加注的JavaScript源代码中生成格式模版化，多页面HTML（或XML, JSON, 抑或其它文本）。



压缩

Online Javascript Compression Tool

一个可以用一些压缩算法如JSMin和Packer压缩JavaScript文件的在线JavaScript压缩器。压缩的JavaScript文件是生产环境中的理想文件，因为它们常常将文件大小减小30-90%。在很大程度上，文件尺寸的缩小是通过除去网页浏览者或访问者不需要的注释和多余的空格字符来实现的。

Scriptalizer

一个将多个JavaScript文件组合为一个文件的在线工具。

Dojo ShrinkSafe

一种命令行实用程序，允许你用浏览器缩小文件大小，从而缩短响应时间。Dojo压缩器不是建立在脆弱的规则表达式基础上的。它基于来自莫兹拉专案的JavaScript引擎。由于一个基于真正的parse stream，Dojo压缩器比基于规则表达式的工具可以更好体现代符（变量名等等）的环境。

YUI Compressor

The YUI Compressor是一种JavaScript压缩器。去除注释和空格之外，它还可以用最小可用变量名混淆局部变量。即使在使用‘eval’或‘with’之类构造（在这些情况下压缩并不合适），这种混淆也是安全的。与jsmin相比，它平均节省20%。



格式化

JavaScript代码美化工具

这个美化工具可处理散乱或压缩的JavaScript代码，不断对其进行快速的格式化并使其可读。



编辑程序&集成开发环境

Aptana Studio

Aptana Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试，HTML/CSS/JavaScript代码提示，以及对重要的Ajax类库的支持。Aptana Studio甚至给你页面上所有的，包括你自己的JavaScript提供代码提示。

Komodo Edit

Komodo Edit是一种免费开放的源编辑程序。它提供自动完成，调用提示，多种语言支持，语法高亮颜色显示，语法检查，Vi emulation，Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对JavaScript开发者有用的扩展（如JSLint plugin for Komodo, Venkman JavaScript Debugger，等等）。

Spket IDE

Spket IDE是JavaScript和XML开发功能强大的工具包。JavaScript, XUL/XBL and Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成，语法高亮显示和内容概要等功能，这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。



其它工具

Google的 AJAX APIs Playground

AJAX API Playground装载有Google JavaScript APIs（Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries和 Earth,等等）例子，你可以编辑运行这些例子帮助你探究Google的APIs可提供的功能。同时也还有保存和输出功能。你可以用保存功能保持编辑的例子以留待以后使用。而输出功能可用来修改例子并把代码公布在一个永久的URL上。

QuirksMode – 相容性表

检查CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Events 和CSS Object Model View主要浏览器相容性状态的最受欢迎的出处。

HTML到JavaScript转换器

HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明。

Glimmer

Glimmer是一种桌面应用软件，可以用它利用jQuery库的作用在网页上轻松制作交互式元素。可以用它轻松制作交错感受如旋转相册/报头，下拉导航，悬停效果，或自定义动画。

jQuery Function Builder

你可以用这个工具很快建立一个函数集，当页面加载完毕/准备完毕时，调用该函数集。

JavaScript Regex Generator

一个制作规则表达的在线工具。



其它浏览器扩展

Firefox, Flock & Seamonkey的网络开发人员扩展

网络开发人员拓展在浏览器中增加了一个菜单和工具条，其中包含许多网络开发工具包括能使你的XHTML生效，发现JavaScript/CSS的错误，网页结构可视化，测试网络表单，改变运行中的XHTML，检查HTTP头信息等等。

Opera Dragonfly

Opera Dragonfly 是Opera浏览器的跨设备，跨平台调试环境—调试 JavaScript, 检查编辑CSS和DOM， 并且查看移动设备或计算机上的错误。

IE6/7的开发者工具条

微软的英特网浏览器开发者工具条为网页的快速创建，理解和故障诊断提供了各种的工具。

]]> http://www.ajaxbbs.net/%e9%9d%9e%e5%b8%b8%e5%85%a8%e9%9d%a2%e7%9a%84%e5%ae%9e%e7%94%a8javascript%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e5%88%97%e8%a1%a8%e4%ba%8c%e3%80%90%e8%bd%ac%e3%80%91/feed/ 1 非常全面的实用JavaScript开发工具列表(一)【转】 http://www.ajaxbbs.net/%e9%9d%9e%e5%b8%b8%e5%85%a8%e9%9d%a2%e7%9a%84%e5%ae%9e%e7%94%a8javascript%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e5%88%97%e8%a1%a8%e4%b8%80%e3%80%90%e8%bd%ac%e3%80%91/ http://www.ajaxbbs.net/%e9%9d%9e%e5%b8%b8%e5%85%a8%e9%9d%a2%e7%9a%84%e5%ae%9e%e7%94%a8javascript%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e5%88%97%e8%a1%a8%e4%b8%80%e3%80%90%e8%bd%ac%e3%80%91/#comments Thu, 31 Dec 2009 13:37:37 +0000 yemoo http://www.ajaxbbs.net/?p=62 在今天网络开发方面，JavaScript起了很关键的作用；像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用，书写更强大，更坚实可靠的JavaScript的需要日益迫切。（51CTO编辑：当前Web开发界普遍认为JavaScript将会成为主流，可能会成为RIA的竞争对手。）

... ]]> 在今天网络开发方面，JavaScript起了很关键的作用；像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用，书写更强大，更坚实可靠的JavaScript的需要日益迫切。（51CTO编辑：当前Web开发界普遍认为JavaScript将会成为主流，可能会成为RIA的竞争对手。）

不管你是JavaScript新手还是经验丰富的开发者，你所使用的工具直接影响你的工作效率。开放源代码运动使得拥有得力的工具不再意味着付一大笔钱；实际上你什么都不用付出。下面是一个对JavaScript开发者真正有实用价值的免费工具列表。

测试

JSLint –JavaScript的验证器

JSLint取得一个JavaScript源代码并对其扫描。如果发现问题，它送回信息描述问题状况及在源代码中的大概位置。问题不一定就出在句法上，不过常常正是这里出错。JSLint查看一些风格约定和结构问题，它证明不了程序是否正确。它只是提供了另一双眼睛来帮助发现问题。

JsUnit

JsUnit是一个客户端（内浏览器）JavaScript单元测试框架。它其实是JUnit给JavaScript的一个口岸。其中还有一个平台来在多个浏览器上以及运行不同操作系统的多个机器上的自动执行测试。

YUI Test

YUI Test是一个测试框架，它针对基于浏览器的JavaScript解决方案。你可以用YUI Test在JavaScript 解决方案上轻松添加单元测试。

Obtrusive JavaScript Checker

可作为Firefox扩展，Greasemonkey用户脚本，以及Ubiquity命令；Obtrusive JavaScript Checker是一种可以扫过页面上所有元素的工具，发现带有行内事件的HTML元素（这是有危害性的，JavaScript应该是不张扬的）时，它给这部分加红边使其凸显。

Crosscheck

Crosscheck是一个开源测试框架，验证内浏览器JavaScript代码。它帮助你确保代码可以在Internet Explorer和Firefox等种种不同的浏览器上运行，而这些浏览器都不需要安装。

JSLitmus

JSLitmus是一个轻量级工具用来制作JavaScript的特定标准测试。

JavaScriptMVC的测试插件

JavaScriptMVC的测试库提供事件模拟，单元测试，Ajax 夹具，和一个控制台程序。



调试

Javascript调试工具包

JavaScript调试工具包是一种跨浏览器调试JavaScript的eclipse plugin，它可以在IE,Firefox,Safari,Chrome,Opera甚至是移动浏览器上调试JavaScript。

Firebug

作为最受欢迎的网页开发程序工具，Firebug是Firefox的一个插件，可以用它在任何网页上现时编辑，调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests logging，JavaScript解释器，DOM explorer等等。Firebug Lite 可以在IE, Opera, 和Safari上使用。

Venkman

Venkman为基于Gecko的浏览器提供功能强大JavaScript调试环境。这个调试器以Firefox & Mozilla插件的形式使用。可以在用户界面上和控制台命令中使用断点管理，调用栈检查，变量/对象检查等功能，可以让你以最习惯的方式调剂。

NitobiBug

NitobiBug是一种基于浏览器的JavaScript对象记录和检查工具——与Firebug作用相似。NitobiBug在可以在不同的服务器（IE6+, Safari, Opera, Firefox）上运行以提供开发各种Ajax应用程序一致且功能强大的工具。

DamnIT

DamnIT是一种免费服务，当用户在网页上遇到JavaScript错误时它会给你发送电子邮件。

JS Bin

JS Bin是一种在线网络应用程序，为帮助JavaScript开发者在一定情景里测试代码片段以及协作调试代码而特别设计。你可以用JS Bin在线编辑测试JavaScript和HTML代码。一旦完成，你可以将URL保存并发送给同伴来进行审查或获得帮助。

Blackbird

许多JavaScript开发者仅仅使用alert()来显示各种信息调试代码。Blackbird在JavaScript上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。

]]> http://www.ajaxbbs.net/%e9%9d%9e%e5%b8%b8%e5%85%a8%e9%9d%a2%e7%9a%84%e5%ae%9e%e7%94%a8javascript%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e5%88%97%e8%a1%a8%e4%b8%80%e3%80%90%e8%bd%ac%e3%80%91/feed/ 1 IE8 在元素尺寸大于(2048px/4096px)时 alpha滤镜渲染失败 http://www.ajaxbbs.net/ie8-%e5%9c%a8%e5%85%83%e7%b4%a0%e5%b0%ba%e5%af%b8%e5%a4%a7%e4%ba%8e2048px4096px%e6%97%b6-alpha%e6%bb%a4%e9%95%9c%e6%b8%b2%e6%9f%93%e5%a4%b1%e8%b4%a5/ http://www.ajaxbbs.net/ie8-%e5%9c%a8%e5%85%83%e7%b4%a0%e5%b0%ba%e5%af%b8%e5%a4%a7%e4%ba%8e2048px4096px%e6%97%b6-alpha%e6%bb%a4%e9%95%9c%e6%b8%b2%e6%9f%93%e5%a4%b1%e8%b4%a5/#comments Thu, 31 Dec 2009 01:28:26 +0000 yemoo http://www.ajaxbbs.net/?p=61 自动上次ymPrompt组件发布，自己就曾发现在IE8下遮罩的半透明滤镜有时无效的问题，后来也有网友提出过这个问题，但自己一直也没有太多关注，以为是IE8的安全策略问题，因此我一直都认为IE8可能默认不支持alpha透明滤镜了。曾经心里还一直纳闷：这MS是在搞什么呢，自动的东西都搞得这么不统一。

对此问题，我一直都认为没有很好的解决办法，唯一有效的办法就是采用IE7兼容模式来编写页面，即在页面中增加

<meta http-equiv="X-UA-Compatible" content="IE=7" />

，但这对于专门为ie8编写的页面来说是个比较不靠谱的方法。

... ]]> 自动上次ymPrompt组件发布，自己就曾发现在IE8下遮罩的半透明滤镜有时无效的问题，后来也有网友提出过这个问题，但自己一直也没有太多关注，以为是IE8的安全策略问题，因此我一直都认为IE8可能默认不支持alpha透明滤镜了。曾经心里还一直纳闷：这MS是在搞什么呢，自动的东西都搞得这么不统一。

对此问题，我一直都认为没有很好的解决办法，唯一有效的办法就是采用IE7兼容模式来编写页面，即在页面中增加

<meta http-equiv="X-UA-Compatible" content="IE=7" />

，但这对于专门为ie8编写的页面来说是个比较不靠谱的方法。

近段时间在抽时间准备编写下一版本的ymPrompt，因此下载了一些时下流行的弹出组件，看看其实现和演示，一次测试中，无意发现某个组件的弹出遮罩在IE8下是半透明的，当时就立即查看源码，但奇怪的是没有发现那个兼容IE7的代码存在，难道这里还有什么高招或者玄机？我把组件里的那行半透明的html取出来，和自己组件中的代码对比，但没有发现什么差别，然后就对比CSS属性，一个个测试，最后发现，当把高度改为和我Demo中遮罩高度一致时，半透明就失效了！到这里基本知道，IE8应该是元素达到某个界限值后滤镜无效了。

在本人笔记本（ATI显卡+WIN7+IE8）上多次测试，发现当遮罩的高度或者宽度大于4096时，透明滤镜就失效了~ 这个数字在计算机还是比较有特殊意义的:2的N(N=12)次方。接下来开始在google寻找一些相关的资料，虽然资料很少，还是找到了一些相关的内容，如filter-alpha-opacity fails if the element is taller than 2048px, IE7 Vista和IE8/Vista – Opacity not honored on large elements这两篇文章。从文章来看，好像这个尺寸并不是固定的4096，这个尺寸貌似跟显卡有关，有些显卡在尺寸大于2048时alpha就失效了。

Satyen Desai总结了这么一段话：

It fails precisely when the height of the element crosses 2048 (for a laptop with ATI card X), or 4096 (for a desktop with ATI card Y) based on some
testing I asked a user to try.

到这里，问题原因基本算清楚了：IE8 Alpha滤镜渲染机制有些问题，在应用Alpha滤镜的元素的宽或高大于某个值时（如4096/2048）时，该滤镜就失效了。

尽管搞清楚了原因，并不是ie8不支持alpha，或者并不是安全策略问题，而是ie8的bug。但是还是有些小郁闷，既然之前浏览器版本能很好支持Alpha，为什么到ie8就出问题了呢？？

发现了问题，后面就是想办法解决这个问题，除了之前所讲的IE7兼容模式的办法，我暂时只有两个WS的办法：（1）对非IE6统一采用透明PNG来做半透明。（2）ie8下对超出特定高度的部分重新创建一个遮罩层（这带来了维护遮罩层的复杂度）。

如果哪位老大有更好的办法，欢迎指点与我，在此先多谢了~

]]> http://www.ajaxbbs.net/ie8-%e5%9c%a8%e5%85%83%e7%b4%a0%e5%b0%ba%e5%af%b8%e5%a4%a7%e4%ba%8e2048px4096px%e6%97%b6-alpha%e6%bb%a4%e9%95%9c%e6%b8%b2%e6%9f%93%e5%a4%b1%e8%b4%a5/feed/ 2 针对google Chrome的 CSS hacks http://www.ajaxbbs.net/%e9%92%88%e5%af%b9google-chrome%e7%9a%84-css-hacks/ http://www.ajaxbbs.net/%e9%92%88%e5%af%b9google-chrome%e7%9a%84-css-hacks/#comments Fri, 27 Nov 2009 10:37:49 +0000 yemoo http://www.ajaxbbs.net/?p=60 今天调试某页面样式，发现chrome下出现问题，但是同样基于webkit引擎的safari没有问题，很是郁闷。于是寻找针对google chrome 的hacks解决方案，网上先搜索了一把，得到的答案基本是一样的，如这篇文章http://www.zeroz.cn/blog/archives/162/，但是自从firefox3.5发布后这个hack就不太灵验了，因为FF 3.5也开始识别nth-of-type了。

于是继续苦找，发现了一个[URL=http://www.new263.com/CssStudy/2009/9/099523115258.html]针对webkit的hacks

]]> 今天调试某页面样式，发现chrome下出现问题，但是同样基于webkit引擎的safari没有问题，很是郁闷。于是寻找针对google chrome 的hacks解决方案，网上先搜索了一把，得到的答案基本是一样的，如这篇文章http://www.zeroz.cn/blog/archives/162/，但是自从firefox3.5发布后这个hack就不太灵验了，因为FF 3.5也开始识别nth-of-type了。

于是继续苦找，发现了一个针对webkit的hacks：

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
}

这样的hacks同样是被Google Chrome、Safari 3.0、Opera 9 所识别的，这还是不能根本解决我的问题。但是仔细查看这篇文章，发现了“另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。”这句话，于是算是变通的找到了一个解决办法。我的代码是要将chrome的字体设置为宋体，其它浏览器仍然使用默认设置的字体。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .parent-cat li{font-family:'宋体'}
  .parent-cat li{font-family:inhert;#}
}

在设置完针对google chrome的样式后，再通过css inhert + # hacks即可达到我们的目标。

一点小经验，顺便记录一下，N久不更新blog，惭愧……

]]> http://www.ajaxbbs.net/%e9%92%88%e5%af%b9google-chrome%e7%9a%84-css-hacks/feed/ 1 XHTML与HTML之间的7个区别 http://www.ajaxbbs.net/xhtml%e4%b8%8ehtml%e4%b9%8b%e9%97%b4%e7%9a%847%e4%b8%aa%e5%8c%ba%e5%88%ab/ http://www.ajaxbbs.net/xhtml%e4%b8%8ehtml%e4%b9%8b%e9%97%b4%e7%9a%847%e4%b8%aa%e5%8c%ba%e5%88%ab/#comments Tue, 19 May 2009 13:57:41 +0000 yemoo http://www.ajaxbbs.net/?p=58
  1. 在XHTML中，<html>、<head>、<body>都是必需的标签。
  2. 必须设置<html>标签的xmlns属性，且其值为“http://www.w3.org/1999/xhtml”。
  3. 所有元素都必须结束。任何起始标签要么有一个对应的结束标签（如果它是一个容器的话），要么是一个自结束元素“空格加斜线”。
    4. ... ]]> 尽管可能是个比较老的话题了，但是我还是从来没有整理过。今天在《精通HTML》一书中看到，这里整理一下。
    1. 在XHTML中，<html>、<head>、<body>都是必需的标签。
    2. 必须设置<html>标签的xmlns属性，且其值为“http://www.w3.org/1999/xhtml”。
    3. 所有元素都必须结束。任何起始标签要么有一个对应的结束标签（如果它是一个容器的话），要么是一个自结束元素“空格加斜线”。
    4. 所有标签都必须是小写。
    5. 任何属性值要么用单引号引起来，要么用双引号引起来。如class=page就是不合法的，而class=’page’和class=”page”均是合法的。
    6. 所有属性必须有值。有些属性，比如<option>标签的selected属性，在HTML中可以使用简写形式，即<option selected>数据</option>，然后在XHTML中，必须这样编写：<option selected=”selected”>数据</option>。
    7. “&”符号必须编码。也就是说，应该将其写成“&amp;”而不是仅仅写成“&”。不管是“&”在正文中还是在URL中，这一点始终都成立。
    ]]>     http://www.ajaxbbs.net/xhtml%e4%b8%8ehtml%e4%b9%8b%e9%97%b4%e7%9a%847%e4%b8%aa%e5%8c%ba%e5%88%ab/feed/ 4 基于jQuery实现的类flash菜单效果 http://www.ajaxbbs.net/%e5%9f%ba%e4%ba%8ejquery%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%b1%bbflash%e8%8f%9c%e5%8d%95%e6%95%88%e6%9e%9c/ http://www.ajaxbbs.net/%e5%9f%ba%e4%ba%8ejquery%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%b1%bbflash%e8%8f%9c%e5%8d%95%e6%95%88%e6%9e%9c/#comments Mon, 18 May 2009 15:16:31 +0000 yemoo http://www.ajaxbbs.net/?p=57 除了上文中的渐变文字，dragoninteractive网站还有一个很酷的效果，就是网站菜单的鼠标特效，如果不看代码，我们很多人估计该要误以为这个是flash特效了，只是这里还是用JS来实现的。这个看着貌似简单的站实现了很多我们以为只有图片和flash才能实现的效果。

    废话不多说了，这里要说的就是一个菜单的hover的效果，一般我们通过CSS的伪类:hover实现的菜单切换都比较单调，因为仅仅是一个简单的图片的变化，不像很多flash菜单一样变化非常的平滑，但是这里我们就是要用非flash的技术实现一个平滑的hover效果。

    ... ]]>     除了上文中的渐变文字，dragoninteractive网站还有一个很酷的效果，就是网站菜单的鼠标特效，如果不看代码，我们很多人估计该要误以为这个是flash特效了，只是这里还是用JS来实现的。这个看着貌似简单的站实现了很多我们以为只有图片和flash才能实现的效果。

    废话不多说了，这里要说的就是一个菜单的hover的效果，一般我们通过CSS的伪类:hover实现的菜单切换都比较单调，因为仅仅是一个简单的图片的变化，不像很多flash菜单一样变化非常的平滑，但是这里我们就是要用非flash的技术实现一个平滑的hover效果。

    先来看看效果：http://www.ajaxbbs.net/test/hovermenu/

    因为下面的menu和上面的logo的实现原理一样，为了简化起见，我们这里只拿logo部分的代码来说明一下原理：

    1. HTML代码：

      <a id="logotype" href=""><span>Logo Type</span></a>

    2. CSS代码：

      a#logotype{
      background: url(logotype.jpg) no-repeat top left;
      display: block;
      position: relative;
      height: 70px;
      width: 119px;
      }
      a#logotype span{display:none}
      a#logotype .hover {
      background: url(logotype.jpg) no-repeat bottom left;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 70px;
      width: 119px;
      }

      这里有一个.hover的class，从html中并没有发现，不要着急，这个在后面的js中会用到。

    3. JS代码：

      $(function() {
      var fadeSpeed = ($.browser.safari ? 600 : 450);
      $('#logotype').append('');
      $('.hover').css('opacity', 0);
      $('.hover').parent().hover(function() {
      $('.hover', this).stop().animate({
      'opacity': 1
      },
      fadeSpeed)
      },
      function() {
      $('.hover', this).stop().animate({
      'opacity': 0
      },
      fadeSpeed)
      });
      });

      这段JS很清楚的描述了该效果的实现原理：首先在链接中创建一个class为hover的span（这个span是鼠标放到连接上时的现实效果），并且将其透明度设置为0，然后当鼠标移到连接上时，将该span的透明逐渐调整为1，这样上面的span就会覆盖a的默认效果，这样就实现我们的动画效果。

    ]]>     http://www.ajaxbbs.net/%e5%9f%ba%e4%ba%8ejquery%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%b1%bbflash%e8%8f%9c%e5%8d%95%e6%95%88%e6%9e%9c/feed/ 1     基于jQuery实现的立体文字渐变效果 http://www.ajaxbbs.net/%e5%9f%ba%e4%ba%8ejquery%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%ab%8b%e4%bd%93%e6%96%87%e5%ad%97%e6%b8%90%e5%8f%98%e6%95%88%e6%9e%9c/ http://www.ajaxbbs.net/%e5%9f%ba%e4%ba%8ejquery%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%ab%8b%e4%bd%93%e6%96%87%e5%ad%97%e6%b8%90%e5%8f%98%e6%95%88%e6%9e%9c/#comments Mon, 18 May 2009 14:23:23 +0000 yemoo http://www.ajaxbbs.net/?p=56 今天看到某人博客推荐了http://dragoninteractive.com/这个网站，貌似一些效果做的比较不错，于是打开了看看，不过还真是让我颇有收获，网站本身设计就很漂亮，里面很多效果也都很酷，而且必须要说的就是很多貌似flash的效果，其实都是通过js实现的，这些东西大大引起了我的兴趣，于是开始阅读代码，分离。

    这里要说的就是网站中通过js实现的一个有立体感的文字渐变效果，先截两个图看看：

    ... ]]>     今天看到某人博客推荐了http://dragoninteractive.com/这个网站，貌似一些效果做的比较不错，于是打开了看看，不过还真是让我颇有收获，网站本身设计就很漂亮，里面很多效果也都很酷，而且必须要说的就是很多貌似flash的效果，其实都是通过js实现的，这些东西大大引起了我的兴趣，于是开始阅读代码，分离。

    这里要说的就是网站中通过js实现的一个有立体感的文字渐变效果，先截两个图看看：

    效果很不错吧？会不会误以为这些字体是图片？这可不是图片，而是用JS实现的

    这里有我做的一个DEMO：http://www.ajaxbbs.net/test/Gradient-text/index.html

    下面来简单分享下实现过程及原理(网站中使用了jquery这个lib，我们这里就不再自己单独实现了，我们这里分享的也是jquery的实现方法)：

    1. HTML代码：

      <span class="rainbows">© 2009 Dragon Interactive. All Rights Reserved.</span>

      为了便于代码重用，我们通过class来标识出哪些文字需要增加这个特效，这里用的是rainbows。

    2. CSS代码：

      .rainbows{position:relative;display:block;}
      .rainbow {
      background: transparent;
      display: block;
      position: relative;
      height: 1px;
      overflow: hidden;
      z-index: 5;
      }

      .rainbow span {
      position: absolute;
      display: block;
      top: 0;
      left: 0px;
      }

      .rainbows .highlight {
      color: #fff;
      display:block;
      position: absolute;
      top: -2px;
      left: 0px;
      z-index: 4;
      }

      .rainbows .shadow {
      color: #000;
      display:block;
      position: absolute;
      opacity: 0.5;
      filter:alpha(opacity=50);
      top: 2px;
      left: 2px;
      z-index: 3;
      }


      这里主要说明下highlight和shadow这两个class的意义，其实从字面也基本可以理解，这两个class是为了增加字体的立体性而设定，一个是白色的高亮，一个是黑色阴影。

    3. JS部分：

      function initGradients(s) {
      $(function() {
      $(s).each(function() {
      var el = this;
      var from = $(el).attr('gradFromColor')||'#ffffff', to = $(el).attr('gradToColor')||'#000000';
      var fR = parseInt(from.substring(1, 3), 16),
      fG = parseInt(from.substring(3, 5), 16),
      fB = parseInt(from.substring(5, 7), 16),
      tR = parseInt(to.substring(1, 3), 16),
      tG = parseInt(to.substring(3, 5), 16),
      tB = parseInt(to.substring(5, 7), 16);

      var h = $(this).height() * 1.5;
      var html,cacheHTML=[];
      this.initHTML = html = this.initHTML||this.innerHTML;
      this.innerHTML = '';
      for (var i = 0; i < h; i++) {
      var c = '#' + (Math.floor(fR * (h - i) / h + tR * (i / h))).toString(16) + (Math.floor(fG * (h - i) / h + tG * (i / h))).toString(16) + (Math.floor(fB * (h - i) / h + tB * (i / h))).toString(16);
      cacheHTML.push('' + html + '')
      }
      cacheHTML.push('' + html + '','' + html + '');
      $(cacheHTML.join('')).appendTo(this)
      })
      })
      }
      //这个部分就是调用了，传入要添加效果的元素，这里可以是jquery的任意选择符。
      initGradients('.rainbows');


    代码看起来并不算多，但是如果想明白原理的话还是要认真的理解下这个代码的。

    结合JS/CSS我们可以看出其大概的思路如下：

    程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。

    本人描述能力比较差，因此如果还不太明白的，可以看看代码，这个还是比较容易理解的。

    ]]>     http://www.ajaxbbs.net/%e5%9f%ba%e4%ba%8ejquery%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%ab%8b%e4%bd%93%e6%96%87%e5%ad%97%e6%b8%90%e5%8f%98%e6%95%88%e6%9e%9c/feed/ 2