Heluyao's Blog » 兼容 http://11gz.com/blog 设计、开发路上的点点滴滴... Fri, 05 Aug 2011 07:24:40 +0000 en hourly 1 http://wordpress.org/?v=3.1 IE6正在消亡 http://11gz.com/blog/2011/04/05/internet-explorer-6-countdown/ http://11gz.com/blog/2011/04/05/internet-explorer-6-countdown/#comments Tue, 05 Apr 2011 09:29:35 +0000 heluyao http://www.11gz.com/blog/?p=567 http://ie6countdown.com/

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

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

]]> http://11gz.com/blog/2011/04/05/internet-explorer-6-countdown/feed/ 7 ECMAScript 5的兼容性 http://11gz.com/blog/2011/04/02/ecmascript-5-compatibility/ http://11gz.com/blog/2011/04/02/ecmascript-5-compatibility/#comments Sat, 02 Apr 2011 03:12:12 +0000 heluyao http://www.11gz.com/blog/?p=566 Kangax:ECMAScript 5 compatibility table

]]> http://11gz.com/blog/2011/04/02/ecmascript-5-compatibility/feed/ 1 css中设置微软雅黑 http://11gz.com/blog/2011/03/23/css-font-microsoftyahei/ http://11gz.com/blog/2011/03/23/css-font-microsoftyahei/#comments Wed, 23 Mar 2011 02:39:28 +0000 heluyao http://www.11gz.com/blog/?p=563 笔记一下，我是这样在css中设置文本字体为“微软雅黑”的。

.selector {font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu}

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

]]> http://11gz.com/blog/2011/03/23/css-font-microsoftyahei/feed/ 4 固定盒子宽高水平及垂直居中的整理 http://11gz.com/blog/2011/03/04/fixed-width-height-vertical-middle/ http://11gz.com/blog/2011/03/04/fixed-width-height-vertical-middle/#comments Fri, 04 Mar 2011 05:59:02 +0000 heluyao http://www.11gz.com/blog/?p=558 记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。

方法一

html

<div class="demo1"><img src="图片路径" alt="" /></div>

css

.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}

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

方法二

html

<div class="demo2"><img src="图片路径" alt="" /></div>

css

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

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

方法三

html

<div class="demo3"><div class="demo3_inner"><img src="图片路径" alt="" /></div></div>

css

.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 > .demo3_inner { position:static;}
.demo3 > .demo3_inner > img { position:static;}

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

如果要放文字

html

<div class="demo4"><div class="demo4_inner"><p>如果是文本,需要添加一标签来实现，我这里添加的是p。</p></div></div>

css

.demo4 { display:table; position:relative; height:180px; width:180px; border:1px solid #ddd; text-align:center;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}

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

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

]]> http://11gz.com/blog/2011/03/04/fixed-width-height-vertical-middle/feed/ 4 补习:跨平台的javascript事件 http://11gz.com/blog/2010/03/20/javascript-event-platform-compatible/ http://11gz.com/blog/2010/03/20/javascript-event-platform-compatible/#comments Sat, 20 Mar 2010 08:19:36 +0000 heluyao http://www.11gz.com/blog/?p=500 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);

解决方法：

function addEventHandler(oTarget, sEventType, fnHandler){
    if(oTarget.addEventListener){
        oTarget.addEventListener(sEventType,fnHandler,false);
    }else if(oTarget.attachEvent){
        oTarget.attachEvent("on" + sEventType,fnHandler);
    }else{
        oTarget["on" + sEventType]=fnHandler;
    }
}
function removeEventHandler(oTarget, sEventType, fnHandler){
    if(oTarget.removeEventListener){
        oTarget.removeEventListener(sEventType,fnHandler,false);
    }else if(oTarget.detachEvent){
        oTarget.detachEvent("on" + sEventType,fnHandler);
    }else{
        oTarget["on" + sEventType]=null;
    }
}

获取事件对象：

IE

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

window.event

火狐：

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

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

解决方法：

function getEvent(){
    if(window.event){
        return window.event;
    }else{
        return getEvent.caller.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、

解决方法：

function formatEvent(oEvent){
    if (isIE && isWin) {
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
        oEvent.eventPhase = 2;
        oEvent.isChar = (oEvent.charCode > 0);
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.body.scrollTop;
        oEvent.preventDefault = function () {
            this.returnValue = false;
        };
        if (oEvent.type == "mouseout") {
            oEvent.relatedTarget = oEvent.toElement;
        } else if (oEvent.type == "mouseover") {
            oEvent.relatedTarget = oEvent.fromElement;
        }
        oEvent.stopPropagation = function () {
            this.cancelBubble = true;
        };
        oEvent.target = oEvent.srcElement;
        oEvent.time = (new Date).getTime();
    }
    return oEvent;
}

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

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

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

]]> http://11gz.com/blog/2010/03/20/javascript-event-platform-compatible/feed/ 1 也来说说inline-block http://11gz.com/blog/2009/05/07/chatting-inline-block/ http://11gz.com/blog/2009/05/07/chatting-inline-block/#comments Thu, 07 May 2009 09:02:07 +0000 heluyao http://www.11gz.com/blog/?p=409 先看看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的普及吧！不过及早的了解它未尝不是一桩妙事！

最后总结一下：

.box{
display: -moz-inline-stack; /* FF2 */
display:inline-block;
*display:inline; /* IE7 */
zoom:1; /* IE系列*/
vertical-align：top;
width:非auto的值;
height:非auto的值;
}

推荐阅读：

模拟兼容性的 inline-block 属性

跨浏览器的inline-block

]]> http://11gz.com/blog/2009/05/07/chatting-inline-block/feed/ 0 解决IE6下PNG透明问题 http://11gz.com/blog/2009/04/11/ie6-png-transparent/ http://11gz.com/blog/2009/04/11/ie6-png-transparent/#comments Sat, 11 Apr 2009 09:50:27 +0000 heluyao http://www.11gz.com/blog/?p=391 　　昨晚帮一朋友制作一个页面，看似很简单！却花了我4个小时。主要是花在页面里3张png的图片上，似了好几种方法，弄来弄去的，头都大了！今天来整理一下，方法都来自互联网，算是做个笔录吧！

一.IE6使用gif，其他则使用png
.pngImg { background:url(image.png); _background:url(image.gif);}

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

二.DD_belatedPNG

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

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

<!–[if IE 6]>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
DD_belatedPNG.fix('CSS选择器, 应用类型');
</script>
<![endif]–>

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

三.让“块”透明的方法
.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

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

]]> http://11gz.com/blog/2009/04/11/ie6-png-transparent/feed/ 6 预留退路+分离javascript+向后兼容性 http://11gz.com/blog/2008/12/15/retreat-separation-backward/ http://11gz.com/blog/2008/12/15/retreat-separation-backward/#comments Mon, 15 Dec 2008 14:07:09 +0000 heluyao http://www.11gz.com/blog/?p=261 　　谈谈这两天学到的一些新东西，就算是做个记录，自己也好随时来看看，增强记忆；同时也让喜欢js的朋友们也多了解一些有用的东西。

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

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

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

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

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

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

]]> http://11gz.com/blog/2008/12/15/retreat-separation-backward/feed/ 1 Chrome对CSS各属性的支持 http://11gz.com/blog/2008/09/16/chrome-css-support-properties/ http://11gz.com/blog/2008/09/16/chrome-css-support-properties/#comments Tue, 16 Sep 2008 09:17:43 +0000 heluyao http://11gz-blog.528u.com/blog/?p=84 　　Chrome，对于做前端开发的伙计们来说应该不陌生。前阵子谷歌推出的浏览器。本人在推出当天就下载试用了，但不到10分钟就又卸载了。没什原因，用惯遨游，够了！等全球很多用户都使用Chrome的时候，我再用它也不迟。到了那时不用都不行了，被“逼”的，就好像火狐“逼”着很多人一样。其实不能这样说，毕竟那么多的用户在使用它，说明它还是好的，就安全性而言，应该算高级别了！

　　回到正题，又扯远了！Chrome对于CSS，可以说跟SAFARI不相上下。对于CSS所有的高级属性它都能很好的支持！这点很让人惊喜哦~~！

　　更详细，请看： http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

]]> http://11gz.com/blog/2008/09/16/chrome-css-support-properties/feed/ 0 ie6玩转position:fixed(实现固定定位) http://11gz.com/blog/2008/07/04/ie6-position-fixed/ http://11gz.com/blog/2008/07/04/ie6-position-fixed/#comments Fri, 04 Jul 2008 08:37:44 +0000 heluyao http://11gz-blog.528u.com/blog/?p=153 　　原理：出去网页以及原有的滚动条，用一个[div]模拟它。然后将要固定定位的区块置于这个模拟层之外，即可实现需要的效果。因为这时滚动条拖动的只是模拟的那个层，而固定定位的这个层根本就不在这个区块内，所以就不会跟随滚动条而动。

　　利用CSS控制行的属性：

下载: code1.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <style type="text/css"> 
  3. html,body { margin:0; padding:0; overflow:hidden;height:100%; width:100%; text-align:left;}
  4. .body { position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
  5. .box {  position:absolute; z-index:999; margin:0 auto; bottom:10px; left:40px; width:800px; height:40px; border:1px solid #369; background:#f7f7f7; line-height:40px;}
  6. </style> 
  7. <div class="box">我是不会被你拖着走的！</div> 
  8. <div class="body"> 
  9.  <p style="margin:15px;">看屏幕底端的区块，再拖动浏览器的滚动条，结果怎么样？满意吧，惊喜吧！</p> 
  10.  <div style="height:1000px;"></div> 
  11. </div>

　　如果不明白，就自己再多想想吧！

　　还有种方法就是利用js来实现了。在此也顺便贴出来吧！

下载: code2.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. .floatBar { width:100%; position:fixed; bottom:0!important;height:31px; background:#f7f7f7; border:1px solid #369;}
  3. .floatBar {
  4. _position:absolute;
  5. _top:expression(eval(document.compatMode &&
  6.         document.compatMode=='CSS1Compat') ?
  7.         documentElement.scrollTop
  8.         +(documentElement.clientHeight-this.clientHeight) - 100
  9.         : document.body.scrollTop
  10.         +(document.body.clientHeight-this.clientHeight) - 100);
  11. }
  12.  
  13. <div style="height:800px;">下面的层是不随滚动条而动的。</div>
  14. <div class="floatBar">
  15. 这个是利用js实现的固定定位。
  16. </div>

　　两个方法都不错哦！值得推荐的！

]]> http://11gz.com/blog/2008/07/04/ie6-position-fixed/feed/ 1