Heluyao的博客 {11gz.com}

http://ie6countdown.com/

IE6在欧美地区已经消失得差不多了，现在重症区是亚洲，中国肯定是排在第一名的，呵呵~！好在还有韩国作陪，再下面就是印度、日本了。最厉害的还是芬兰和挪威，都是小于1个芭仙！

期待着IE6早日“灭绝”，也好给我们这群写代码的省点时间，提高点编码效率！

Kangax:ECMAScript 5 compatibility table

笔记一下，我是这样在css中设置文本字体为“微软雅黑”的。

之所以加上中文名“微软雅黑”是为了兼容opera。Microsoft JhengHei为微软正黑体，STHeiti为华文黑体，MingLiu记得11px下的中文有着不凡的效果。

记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。

方法一

html

css

PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。

方法二

html

css

PS：font-size同上等于盒子height乘以差不多0.873的数值，IE7以上版本及其他高级浏览器均支持display的table-cell。

方法三

html

css

PS:相对定位加绝对定位实现IE6/7，display的table-cell实现高级浏览器。

如果要放文字

html

css

演示代码：http://www.11gz.com/demo/html/vertically.html

我测试过的且兼容的浏览器有：IE6+,Opera,Firefox,Safari,chrome，希望各位朋友帮忙测试其他浏览器。

javascript的事件模型有三种：netscape、IE、W3C/Safari。

事件流又分冒泡型事件和捕获型事件。主要的浏览器代表是netscape、IE7及以下版本。

DOM事件流：同时支持冒泡型事件和捕获型事件。火狐、Safari、IE8等支持DOM事件流的浏览器。

以下内容仅以IE和火狐作为代表进行对比及处理。

添加、移除事件：

IE

oTarget.attachEvent("on" + sEventType, fnHandler);

oTarget.detachEvent("on" + sEventType, fnHandler);

火狐：

oTarget.addEventListener(sEventType, fnHandler, false);

oTarget.removeEventListener(sEventType, fnHandler, false);

解决方法：

获取事件对象：

IE

IE中，事件对象是window对象的一个属性event。

window.event

火狐：

DOM标准中，event对象必须作为唯一参数传给事件处理函数。

arguments[0] 或者 直接传入参数

解决方法：

注：针对火狐的方法请参考 JavaScript 获取事件对象的一个注意点

获取事件属性：

相同处：

1. 获取事件类型(名称)：oEvent.type
2. 获取按键代码(keydown/keyup事件)：oEvent.keyCode
3. 检测是否按下了Shift、Alt、Ctrl键：oEvent.shiftKey、oEvent.altKey、oEvent.ctrlKey
4. 获取客户端鼠标事件坐标：oEvent.clientX、oEvent.clientY
5. 获取鼠标距屏幕边沿坐标：oEvent.screenX、oEvent.screenY

不同处：

1. 获取目标(事件源)：

   IE：oEvent.srcElement

   火狐：oEvent.target

2. 获取字符代码：

   IE：oEvent.keyCode

   火狐：oEvent.charCode

3. 阻止事件发生：

   IE：oEvent.returnValue = false

   火狐：oEvent.preventDefault()

4. 停止事件冒泡：

   IE：oEvent.cancelBubble = true

   火狐：oEvent.stopPropagation()

5. 还有一些属性仅有火狐支持，比如eventPhase、isChar、pageX、pageY、

解决方法：

最后综合起来，EventUtil对象封装起来，就很好的解决了事件的跨平台兼容了。下载：eventutil.js。

此文中涉及到的浏览器检测功能，超出了本文的范围，略过！detect.js 提供代码方便下载测试。

本文参考自《javascript高级程序设计》，详细可翻阅该书籍。

先看看demo，有了inline-block，就可以某种程度上代替了float啦！

支持的：FF3、IE8、Safari、Opera、Chrome

未支持的：IE6、IE7、FF2

下面我们就一一来解决它。

解决FF2：display: -moz-inline-stack 由于FF2未与display:inline-block“达成共识”！但有这一私有属性能顶顶也不错。

解决IE系列：display:inline 针对IE系列，切记需要触发layout，这里使用的是zoom:1。IE7下需要单独设置该值为inline，那么利用星号Hack干掉它！

至此这3个浏览器的兼容性得到解决，可惜的是，直接用于项目里是不放心的，等待着IE8的普及吧！不过及早的了解它未尝不是一桩妙事！

最后总结一下：

推荐阅读：

模拟兼容性的 inline-block 属性

跨浏览器的inline-block

　　昨晚帮一朋友制作一个页面，看似很简单！却花了我4个小时。主要是花在页面里3张png的图片上，似了好几种方法，弄来弄去的，头都大了！今天来整理一下，方法都来自互联网，算是做个笔录吧！

一.IE6使用gif，其他则使用png

　　对于页面来说，该方法是最为完美的，缺陷即gif图像的效果问题。该方法用到的时候很少，依图片而定。但是gif是不能做到半透明的！

二.DD_belatedPNG

　　这个可能是时下最佳解决IE6下PNG问题的办法了，它使用的是微软的VML语言进行绘制，而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜，所以DD_belatedPNG在性能上更具优势，更安全，更稳定。下面介绍下使用方法。

　　先在页面引入DD_belatedPNG.js 压缩后的文件，再调用其方法。

该方法出自：http://dillerdesign.com/experiment/DD_belatedPNG/，详细了解请猛击过去查看相关文档。

三.让“块”透明的方法

第一种方法，只适用于全透明的图片效果。第二种，比较好用的真正处理IE6下PNG24的方法。第三种，不是处理PNG的，偶只是顺带做个笔记而已~

　　谈谈这两天学到的一些新东西，就算是做个记录，自己也好随时来看看，增强记忆；同时也让喜欢js的朋友们也多了解一些有用的东西。

1. 预留退路：确保网页在没有JavaScript的情况下也能正常工作。
2. 分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。
3. 向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死机。

　　其实这些东西说来说去也就是一条：养成良好的JavaScript编程习惯(事实上也并非一件简单的事)。

　　预留退路，如果你正确地给JavaScript考虑了“退路”问题，就可以让用户在浏览器不支持或已关闭JavaScript的情况下也能够顺利浏览到原本该有的信息(虽然某些功能不可用，但至少保证内容是可见的)。

　　分离javascript：顾名思义，就是将js脚本完完全全的迁移出html/xhtml文档，这样做是只有利而无弊的。可能在某些程度上会使得js脚本变得稍显复杂，但这些都是可以接受的。

　　向后兼容性：现在，绝大多数的浏览器都能或多或少的支持JavaScript，同时对DOM的支持也都是很不错滴。但还是存在一些比较古老的浏览器，而正好它们却有可能无法理解DOM提供的方法和属性。解决方法比较容易实现，通过if语句，判断出结果从而选择该采取怎样的行动——这种检测叫做对象检测(object detection)。

　　由于时间关系，该文章未提及解决方法的具体案例，网上有很多类似的例子可以查阅的，多多利用Google和百度吧！