影の域 » Web

KISSY DataLazyLoad组件之事件BUG

影之迷惑 — Fri, 24 Feb 2012 10:58:48 +0000

正在随手弄一Photo App，为了性能和效率，不得不使用LazyLoad，至此，为此BUG的浮现做好了铺垫。

为图快速制作出原型，暂且使用KISSY辅助开发，App自身只有一个重要需求：弹性、自适应。

所以，很自然的对 windows 对象做了 Resize Event 的监听处理。 %*……（*&*%%*……*（，(此处省略1000字)，coding-complete && unit-test-ok !

然后，准备添加 LazyLoad支持以提高体验和性能，降低成本。（殊不知，杯具就此发生）

）*）*（）……&（……&*%&**（此处省略1000字），coding-complete && unit-test-ok !

准备 save && comit, 随着不经意的窗口Scroll 到底部 & Resize ，我hold住了。。。。。

自适应能力貌似费了， &（*（）*——（——*）…………*（*（此处省略1W字）

好吧，我知道，一般都是我的问题，遂，加入以下调试代码块辅助检查：

window.addEventListener('resize', function(){ console.info('Native Resize Event fire !!') }, false);

。。。结果出乎意料，冇反应。

直觉告诉，应该是KISSY在跟我开玩笑。

可是，想不通，为什么窗口在冇完全Scroll到底之前（或者说最后一个图片未被LazyLoad加载之前），一切都那么和谐有序呢？

看来，Source 我不得不再一次的偷窥你了。 – -！

（&（*（）（——）（——…………*（*&（此处省略1W字）

经过排查，问题不在 KISSY.js 核心文件，so, 问题就极有可能存在与 DataLazyLoad 组件本身鸟。 - -!

终于，我找到了让我撕心裂肺的你，你藏的如此诡异，以至于无心者很难察觉你的存在：

var self = this, resizeHandler,
    // 加载延迟项
    loadItems = function () {
        self._loadItems();
        if (self._getItemsLength() === 0) {
            Event.remove(win, SCROLL, loader);
            Event.remove(win, RESIZE, resizeHandler);
        }
    },
    // 加载函数
    loader = S.buffer(loadItems, DURATION, this);

// scroll 和 resize 时，加载图片
Event.on(win, SCROLL, loader);
Event.on(win, RESIZE, function () { self.threshold = self._getThreshold(); loader(); });

从以上代码块，可以看出悲催的 resizeHandler 变量忘记赋值鸟！！！造成 Event.remove(win, RESIZE, resizeHandler) 的影响扩大到了全局，说白了，就是所有的resize 监听器都被瞬间释放鸟，世界清静了。。。。

既然，code里寻你千百行，我也不能让你就在那变量定义处。

fix 就很明了了：

Event.on(win, RESIZE, resizeHandler = function () { self.threshold = self._getThreshold(); loader(); });

为了直观，提供2个简易DEMO来对比。

原始BUG 修正后

标签：bug, dataLazyload, event, kissy, resize

Path UI by CSS3

影之迷惑 — Tue, 06 Dec 2011 06:44:20 +0000

Path的UI惊起哇声一片，最大的亮点无疑是左下角的菜单展开效果。于是有各个版本的仿Path菜单出现，比如我们之前报道过的国内某牛人的作品，这里还有若干个关于Path菜单的讨论。但最引人注意的还是来自法国小伙Victor的作品：用纯CSS3制作的Path菜单效果。

他说他喜欢Path的新界面，尤其是添加菜单，作为一个前端设计师的他打算在浏览器里实现同样的效果。以下是他制作的一段视频：

整个作品通过html/css3完成，没有使用任何图片，没有任何javascript。因此仅支持Webkit浏览器。Victor通过Sass+Compass计算每个图标的坐标，并生成了动画效果。你不用重写代码就可以添加或删除项目。

实际效果请移步至这里，你可以在github上找到这段源代码。

本文转载来自36氪

标签：android, css3, iphone, path, ui

移动 Web 开发平台 Rexsee 开源

影之迷惑 — Fri, 28 Oct 2011 09:30:04 +0000

国内移动Web开发平台Rexsee正式开源，其开发者社区也于本周上线。访问社区可以查看详细开发手册、API说明与示例以及全部源码，并可在线编译免费生成移动应用客户端。

伴随着HTML5的发展以及Web App的广受认可，基于Web的移动应用开发已经受到了技术厂商与开发者的普遍关注。大量的Web框架纷纷转投移动应用领域，近期反响最大的无疑是由 ExtJS、jQTouch 以及 Raphael合并而成的Sencha，以及被Adobe收购的PhoneGap。Mozilla也于上月宣布计划构建 WebAPI，用于在浏览器中调用移动设备功能。

基于类似的技术理念，国内的Rexsee团队已提供了整体的移动应用“开发平台”，并于今年5月开始面向企业级应用市场推广。

Rexsee产品以Webkit为内核，全面支持HTML5。通过扩展超过1500个API，以Javascript实现对移动终端的功能调用，强化HTML5在浏览器之外的移动终端功能实现。开发者可以使用HTML、CSS和Javascript快速实现移动应用，并通过原生化应用转换功能，直接生成应用程序。

不同于国际范围的其他移动Web开发框架，Rexsee并不过度追求跨平台特性。在深度支持Android原生功能的前提下，采用全部同步的开发方式，并在执行效率上有显著提升。

Rexsee的开源策略旨在让更多的开发人员可以迅速的进入到移动互联网领域，基于标准化的Web开发方式快速实现移动应用。结合之前所积累的大量应用，Rexsee开发者社区在上线第一天，就已有246个应用得以审核推出，并且还在持续增加。

作为国内唯一开源的移动Web开发平台，Rexsee定位于服务移动应用开发者的技术平台提供方，力图为移动应用创新发展打造更加广泛坚实的开发者基础。

原文： http://www.oschina.net/news/22624/raxsee-opensource

标签：android, ios, open, Rexsee, source, web

WordPress Rewrite SEO 之404方式折腾笔记

影之迷惑 — Sun, 17 Jul 2011 10:10:57 +0000

WordPress 是多么强大的Blog（甚至可以说CMS）系统就不用多说了。说到底我把WP只看做一个开发起步的框架而已，更多的性能及功能的挖掘和利用还是需要自己去完成。
最近折腾 HTML5探索的SEO时，想起来我的博客依旧还没做过SEO，遂就开始了下面记录中的折腾回忆录。
空间是虚拟主机（还是WIN + IIS）、无Rewrite、无子域名等等，在诸多的不利因素下，对于强大的WordPress来说，依旧能找到较好的优化方式: 404 Rewrite
so, 就开始大面积的调整程序 + hack 终于算完成了现在的Rewrite，真是累死我也。（做了一大堆复杂的兼容工作，历史原因害死人呀！）
经过亲身体验，需要提醒下使用 404 Rewrite 前要明确站点是否为新建站点，若是，一切很easy，若不是，就有了我下面的那么多兼容工作要做，悲催！！
正常的对于新建站点（404支持设置为php页面前提），因为站点较新搜索引擎还未开始收录，对外分享也几乎为0。所以需要做的就相对很少，编写好404.php的处理代码，后台做好配置即可。
而有时候（其实就是我现在啦- -）, 站点运行很长时间（几年了），期间经历过无数的配置调整（还有数据丢失，我擦！），对于各种URL已经产生了很多种版本，所以需要做的工作就非常多了。
由于已经过了2天了，具体顺序都不清楚了，这里仅做下回忆录式笔记，以防以后不备之需（身在天朝，谁知哪天又天灾人祸呀！）：

涉及文件修改列表：

/404.php /index.php /blog/index.php

修改回忆录：

1. /blog/index.php -> /blog/index.php.bak 说白了就是备份
2. 新建 /blog/index.php, 编写一些兼容处理代码:

3. cp /blog/index.php.bak /index.php, 然后增加兼容处理:

 '/205.html'
		         $_qu = preg_replace('/^\/(\d+)/', '$0.html', $_qu);
		    }
		    $_SERVER['PATH_INFO'] = $_SERVER["REQUEST_URI"] = $_qu;
		}
	}
}

// 解决 WordPress的中文路径在WIN + IIS 下的解析错误问题
$_SERVER['PATH_INFO'] = mb_convert_encoding($_SERVER['PATH_INFO'],"UTF-8","GBK");
$_SERVER['REQUEST_URI'] = mb_convert_encoding($_SERVER['REQUEST_URI'], "UTF-8", "GBK");
.....
?>

4. 新建 /404.php 并设置虚拟主机404错误跳转至它，代码摘要：

 '/205.html'
        $_SERVER['REQUEST_URI'] = preg_replace('/^\/(\d+)/', '$0.html', $_SERVER['REQUEST_URI']);
    }

   /**
    * 检测 queryString 和 hash， 非空需特殊处理
    */
    if (strpos($_SERVER['REQUEST_URI'], '?') === 0 || strpos($_SERVER['REQUEST_URI'], '#') === 0) {
        $_SERVER['REQUEST_URI'] = '/index.php' . $_SERVER['REQUEST_URI'];
        $_SERVER['PATH_INFO'] = '';
    } else {
        $_SERVER['PATH_INFO'] = $_SERVER['REQUEST_URI'];
    }

    /**
     * 修正因 404 带来的 wordpress内置分页算法的链接错误问题
     * 比如:
     *   访问 http://www.zfkun.com/date/2010/01 时，上一页本来期望是http://www.zfkun.com/date/2010/01/page/2
     *   而实际，因为使用的404 rewrite技术，上一页链接却成了http://www.zfkun.com:80;/date/2010/01/page/3
     *   这是因为wp内置的分页算法直接使用了 $_SERVER['QUERY_STRING'] 和 $_SERVER["SCRIPT_NAME"] 来生成链接地址，
     *   当前因为是404状态下，所以 $_SERVER['QUERY_STRING'] = '404;http://www.zfkun.com:80/date/2010/01';
     * 注意:
     *   仅修改 $_SERVER['QUERY_STRING'] = '' 的话，并解决不了问题，因为当前执行脚本文件为/404.php 从而会导致
     *   生成的链接到  http://www.zfkun.com/404.php/date/2010/01 上去
     *   所以，必须还要重置 $_SERVER['SCRIPT_NAME'] = '/index.php' 从而让WP内置处理逻辑运行正常
     */
    $_SERVER['QUERY_STRING'] = '';
    $_SERVER["SCRIPT_NAME"] = '/index.php';

    // 启动博客主程序
...
} else {
// 真正的 404 处理
...
}
?>

5. 必须地，后台->固定链接->自定义结构更新值为 /%post_id%.html
这里又发现一个让我很郁闷的问题，若自定义结构使用的形如 /archives/%post_id%.html 或之前的 /index.php/archives/%post_id%
则，分类和标签的路由默认也会增加这个前缀 /archives/tag/* /archives/category/* 擦，之前历史遗留的2种兼容结构，就是因为这个问题导致的，无奈。

6. 其余的乱七八糟的兼容，模糊了，回头想起来补记下

其实，做的工作远比现在记录的要多，只是让我印象深刻（那是好听的，其实我想说恶心的）的是这些。回头有时间继续更新好了。今天就先到这。

标签：404, hack, PHP, rewrite, seo, wordpress

[转]利用跨域资源共享（CORS）实现ajax跨域调用

影之迷惑 — Fri, 15 Jul 2011 05:14:06 +0000

几年前，网站开发者都因为ajax的同源策略而撞了南墙。当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时，我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访问，对此我们哀叹不已。每个人在他们自己的网站上建立代理（which was the onset of a new host of open redirect problems）来摆脱这种限制。虽然开发者利用服务器代理和其它技巧避开了这种限制，而在社区的抗议者允许ajax在本地跨域调用。许多人还没意识到当前几乎所有的浏览器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome）都可通过名为Cross-Origin Resource Sharing的协议支持ajax跨域调用。

跨域资源共享（CORS）

Cross-Origin Resource Sharing (CORS)是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。

Origin: http://www.nczonline.net

如果服务器确定请求被通过，它将发送一个Access-Control-Allow-Origin头部响应发送请求的同一个源，如果是一个公共资源，则返回“*”。如：

Access-Control-Allow-Origin: http://www.nczonline.net

如果头部丢失，或者源不匹配，那么浏览器将拒绝请求。如果一切顺利，浏览器将处理请求。注意，请求和响应都不包括cookie信息。

先前提到的所有浏览器都支持这些简单的请求。FF3.5 +，Safari 4和chrome通过使用XMLHttpRequest对象支持其使用。当尝试在不同域打开一个资源时，不需任何代码，这个行为会自动触发。如：

var xhr = new XMLHttpRequest();
xhr.open("get", "http://www.nczonline.net/some_resource/", true);
xhr.onload = function(){  //instead of onreadystatechange
    //do something
};
xhr.send(null);

在IE8中也是一样，用同样的方式你需要使用XDomainRequest object。

var xdr = new XDomainRequest();
xdr.open("get", "http://www.nczonline.net/some_resource/");
xdr.onload = function(){
    //do something
};
xdr.send();

Mozilla小组在他们关于CORS的留言中建议应该检查withCredentials属性的存在性，从而决定浏览器是否通过XHR支持CORS。你可以合并XDomainRequest 对象的存在性来支持所有的浏览器：

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "http://www.nczonline.net/");
if (request){
    request.onload = function(){
        //do something with request.responseText
    };
    request.send();
}

Firefox, Safari, 和Chrome的XMLHttpRequest对象与IE的XDomainRequest对象有着相似的充分的接口，这些模式运行的很好。常见的接口属性/方法:

abort()——用来终止已在进程中请求。
onerror()——替代onreadystatechange方法来探测错误。
onload()——替代onreadystatechange方法来探测成功。
responseText——用来取得响应地文本。
send()——用来发送请求。

Preflighted请求

除了GET或POST，通过一种称之为preflighted请求的服务器透明验证机制，CORS允许使用自定义的头部和方法，以及不同主体内容类型。当你尝试使用高级选项中的一个来试着建立一个请求时，这时就建立了一个preflighted请求。该请求使用可选的方法，并发送如下头部：

Origin——与简单请求相同。
Access-Control-Request-Method——请求将要使用的方法。
Access-Control-Request-Headers——（可选）一个逗号分开的正被使用的自定义头部列表。

例子假定一个头部自定义为NCZ的POST请求：

Origin: http://www.nczonline.net
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

在请求期间，服务器能决定是否允许这类请求。服务器通过在响应中发送以下头部来与浏览器通信。

Access-Control-Allow-Origin——与简单请求相同。
Access-Control-Allow-Methods——用逗号分开的可接受的方法列表。
Access-Control-Allow-Headers——用逗号分开的服务器可接受的头部列表。
Access-Control-Max-Age——preflighted 请求应该被缓存的时间。

如：

Access-Control-Allow-Origin: http://www.nczonline.net
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

preflighted 请求一旦作出，结果将按响应中规定的时间缓存下来；第一次做出这样的请求，你将引发一次额外的HTTP请求。

Firefox 3.5+, Safari 4+和Chrome都支持preflighted 请求，IE8则不支持。

Credentialed请求

默认状态下，跨域请求不提供证书（cookie、HTTP身份验证、客户端SSL证书）。你可以规定一个请求应该通过设置withCredentials属性为true来发送证书。如果服务器允许credentialed请求，那么它将用下面的头部作出响应：

如果一个credentialed请求被发送，这个头部不会作为响应地一部分被发送。浏览器不会将响应传递给JavaScript(responseText是一个空字符串，状态为0，onerror()被调用)。注意，服务器也能发送这个HTTP头部作为preflight响应的一部分，以此来表明该源允许发送credentialed请求。

Access-Control-Allow-Credentials: true

IE8不支持withCredentials属性，Firefox 3.5+, Safari 4+和Chrome都支持它。

结论

在现代web浏览器中对跨域AJAX调用有许多可靠地支持，然而，大多数开发者仍没意识这些强大的功能力。只需在JavaScript和服务器端做一点额外的工作以保证正确的头部被发送即可使用它。在允许高级请求和credentialed请求方面，IE8的执行有些滞后，但希望它对CORS的支持将会继续改进。如果你想了解更多，我强烈建议你检查Arun Ranganathan的示例页。

[转]IE6、IE7、IE8 CSS Bug兼容解决记录

影之迷惑 — Tue, 14 Jun 2011 10:05:04 +0000

1：li边距“无故”增加

任何事情都是有原因的，li边距也不例外。

先描述一下具体状况：有些时候li边距会突然增加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引起，padding的上下值对li有影响，左右无影响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许还会引起其他不必要的怪现象。

现在终于发现解决这个问题的方法，其实很简单，既然是有ul引起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只针对IE6/IE7有效，其他浏览器并不渲染这个属性。

2：分页数字字体用“Arial ”加粗不抖动





无标题文档




分页样式
 1 2 3 4 5

6 7 8 9 10

3：IE6 CSS选择器区分IE6

IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

/*IE6 专用 */
.content {color:red;}

/* 其他浏览器 */
div>p .content {color:blue;}

4：IE6最小高度

IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：

使用ie6不支持但其余浏览器支持的属性!important。

#container{min-height:200px; height:auto !important; height:200px;}

5：IE6100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

6：IE6躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：

1.在（那个未浮动的）内容之后添加一个
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

7:IE6绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会
产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

8: IE下z-index的bug

在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

9: Overflow Bug

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

10: 横向列表宽度bug

如果你使用float:left;把

横向摆列，并且

内包含的（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给定义同样的float:left;即可。

11: 列表阶梯bug

列表阶梯bug通常会在给

的子元素使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。
解决办法就是给

定义float:left;而非子元素，或者给

定义display:inline;也可以解决。

12: 垂直列表间隙bug

当我们使用

包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（

）之间添加空隙。
解决方法：把 flaot并且清除float来解决这个问题；另外一个办法就是触发的hasLayout（如定义高宽、使用zoom:1;）；也可以给

定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

13: IE6调整窗口大小的 Bug

当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：

给body定义position:relative;就行了。

14: 文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。

解决办法：给浮动元素添加display:inline;。

15：链接a的title属性中的文字换行

啥也不说，先上个图

我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的文字，常常用来加一些提示语句，

比如说点击查看详情之类的，代码形如：

链接xx

。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显示更多东西的话，怎么实现呢。第一反应是jquery的tooltip插件。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的，找了下，没发现有Javascript脚本，再往链接的地方一看，终于让我发现了门道了：

发布日期: 2010-5-31 16:05:08 类别：院务通知点击: 139″>

[05-31] 关于对我校2006年至2009年发展党员工作情况进…

注意到了吗。。很简单，只要使用这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下，这样的显示效果相当不错，而且是浏览器原生的效果，安逸。

哎，虽然号称精通div+css，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘。

16：如何去掉点击链接时的虚线

解决方案1：在 Mike blog

解决方案2：在标签中加入 hidefocus Mike blog

解决方案3: 如果连接太多，可以用外部链接 .HTC 文件。如，blur.htc

文件内容如下：

onevent=”makeblur()”>

在 CSS 中加入如下代码：

A { behavior:url(blur.htc); }

解决方案4 ( 推荐 )：使用CSS样式，可加入代码：a {blr:expression_r(this.onFocus=this.blur())}

如果是FF等浏览器的话可这样写 a{ouline:none;}

17:制作1px细线表格

解决方案1 ( 推荐)：我们只要给这个table一个border-collapse:collapse的样式，就可以达到这个效果了。

具体如下：

1、HTML结构:

style=”border-collapse:collapse;”>

18：IE6 下z-index无效

在CSS中，通过z-index这个属性改变层级，要让z-index起作用有个前提，就是元素的position属性要是relative，absolute或是fixed。

z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对，尤其遇到IE6。

1、关于效果截图的些必要说明

下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：

1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度 40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

对应CSS为：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看：

这说明内容在z-index为1的绝对定位层之下。

这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z- index不起作用有很直观的认识了。

2、IE6的抱怨：浮动让我沉沦

现在开始真正的讲述问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。

您可以拿下面的代码自己做个简单测试：

丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：

结果IE6下：

我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7 下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

解决方法，解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。

3、固执的IE6：它只认第一个爸爸

可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：

父标签position属性为relative 或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上的小小偏差。

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码：

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋——

再看看以Firefox为代表的其他童鞋：

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：

结果IE6童鞋喜笑颜开，春光灿烂：

19：css reset中的list-style:none

在IE6,7下,当UL不具有float:left;display:inline;时:

无论有没有list-style:none这个属性,列表符都被隐藏,不占位置(下面代码中的5,6)

当UL具有float:left;display:inline;属性时

list- style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);

未设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)

在firefox中只要list-style-type为none ,则无论list-stype-position的值为outside或inside , list-style都能很好的被隐藏

而在IE6,7中,仅设置list-style:none,并不足以解决所有问题

所以我认为在css reset的时候使用 list-style:none outside none 更好

20：链接去边线（完全兼容）

a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 额外产生的6PX 或者4px margin

今天在做一个Timeline的模块的时候遇到一个棘手的问题：给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right。

原始代码

.YP_timelineChart_box li{

display:-moz-inline-stack;

display:inline-block;

zoom:1;

*display:inline;

text-indent:-3000px;

width:5px;

vertical-align:bottom;

background-color:#00FF00;

position:relative;

}

页面渲染结果：

每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：

把原来的HTML 代码结构：

更改为：

这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。

22: IE6中伪类:hover的使用及BUG

以前未曾遇到类似的问题，一番google，才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码：

淘宝网淘你喜欢

在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性，例如

a:hover{border:none;}

或者

a:hover{padding:0;}

又或者

a:hover{background: none;}

此时hover就可以触发了。

23：原来IE6支持!important

.demo { color:#F00!important; color:#000; }/*IE6显示错误理解：.demo显示为黑色*/

/*而下面IE6是正确理解的：.demo显示为红色*/

.demo { color:#F00!important;}

.demo { color:#000; }

24:去掉button按钮左右两边的留白

25:中文字体在css中的写法

黑体SimHei\9ED1\4F53黑体

宋体SimSun\5B8B\4F53宋体

新宋体 NSimSun\65B0\5B8B\4F53新宋体

仿宋FangSong\4EFF\5B8B仿宋

楷体KaiTi\6977\4F53 楷体

微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体

微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑

幼圆 YouYuan\5E7C\5706幼圆

26： ie6里width:100%是相对于上有高度设置的元素其他浏览器是相对于上个相对定位或绝对定位的元素

在非ie6的浏览器中都是满屏幕的红，说明非ie6的浏览器的width和height的百分比，都是相对的上个相对定位或者绝对定位的元素，没有就为html元素，而ie6中的width和height 的百分比，相对的是上个有高宽显示设置的元素，而且height的百分比设置失效，所以上述代码在ie6中就出现宽度穿越了他的父元素而遇见width:500px;的元素的时候，边把自己设置成了width:500px;而height的设置则失效，这个，让人很蛋疼！ie6，真的该早点走了！

27： ie不缓存背景图片的解决办法

高性能web开发中，一张小小的图片请求能省的就省，可IE6存在不缓存背景图的bug.如果重复使用了一个图片作为背景，那么每用一次就会重新去服务器拉一次。。。给服务器带来巨大的压力。解决方法有两种，

1：采用JS

var ua = navigator.userAgent.toLowerCase();

var isIE6 = ua.indexOf(“msie 6″) > -1;//判断是否为IE6

// remove css image flicker

//IE6下默认不缓存背景图片，CSS里每次更改图片的位置时都会重新发起请求，用这个方法告诉IE6缓存背景图片

if(isIE6){

try{

document.execCommand(“BackgroundImageCache”, false, true);

}catch(e){}

}

2.在页面上直接使用1个DIV元素来加载该图片，这样加载图片就能真正被缓存，鼠标移动也不会发送请求了。

28:ie6下css实现max/min-width/height

_width:expression(this.width>300?”300px”:ture); max-width:300px;

_height:expression(this.height>300?”300px”:ture); max-height:300px;

29：css空白外边距互相叠加的解决方法

body{width:300px; font-family:’微软雅黑’; font-size:1em; text-indent:10px; line-height:1.25;}

div{background:#000;margin:10px;}

div p{background:#f60;margin:15px}

这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?

好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:

为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.

如何解决?本人比较推荐两种解决方式:

其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid #ddd;

其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px

另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.

30：纯css解决多行文字垂直居中

哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～

其大概原理为：第一个alert_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的。虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜。另：zoom:1是为了触发hasLayout。

31:关于flash遮盖div浮动层

(a) place Flash embed script in

container (I use SWFObject.js)[将flash嵌入脚本放到一个div容器中]

(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本]

container with z-index:-1; [将外层容器的z-index设置为-1]

(d) set tag with style .. position:relative;left:0px;top:0px;z-index:0;

(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;[将浮动的iframe在容器中的zindex设置为99]

(f) use CSS to position flashcontent and htmlcontent containers.[使用css来调整flash容器和html容器的位置]

其他方案网上比较多见,不做阐述.在此说下使用第一个方案如何解决:

var so = new SWFObject(“XXX.swf”, “flashId”, “宽度”, “高度”, “版本”, “背景色”);

//设置flash不遮盖div层

so.addParam(“wmode”, “opaque”);

so.write(“flashcontent”);

如此设置即可让flash无法遮盖住div

32:如何处理ie6的文字行高

ie6下汉字就会显示偏上位置，而在标准浏览器中不存在这个问题字体 Tahoma,试下

不过如果有规定第一个字体是用啥的，那就只能忽略这个问题..我终于明白淘宝为啥把Tahoma字体放到第一位了

测试ie6的文字行高表现

岁月不饶人哪

hjgt

岁月不饶人哪

hjgt

33:利用 CSS 跨浏览器地隐藏文字一法

ont-size:0; // for firefox & opera

color: transparent; // for webkit

overflow:hidden; // for IE

font-size:0;

filter:alpha(opacity=0);

自测后兼容的浏览器如下：

IE 6-8

Firefox 1-4

Opera 9-10

Safari 3-5

Chrome 1-6

34:button在chrome下默认有2px的margin

35:ie6和ie7里面margin失效

我的margin在ie里面失效了

解决办法去掉里面div的高度

标签：bug, css, ie

Windows7下搭建Node.js环境

影之迷惑 — Wed, 06 Apr 2011 08:34:18 +0000

1. 下载并安装Cygwin 及Node.js安装依赖的附加组件

cygwin下载: http://cygwin.com/setup.exe (下载点最好选择台湾或日本的临近点，速度快)

附加组件选择:

Devel :
gcc-g++: C++ compiler
gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
gcc4-g++: G++ subpackage
git: Fast Version Control System – core files (github方式下载时用)
make: The GNU version of the ‘make’ utility
openssl-devel: The OpenSSL development environment
pkg-config: A utility used to retrieve information about installed libraries
zlib-devel: The zlib compression/decompression library (development)

Editor:
vim: Vi IMproved – enhanced vi editor

Python:
全部

Web:
wget: Utility to retrieve files from the WWW via HTTP and FTP
curl: Multi-protocol file transfer command-line tool

2. 由于操作系统为 windows 7 (Windows Vista以后版本)，需要在ash模式下执行rebaseall才能保证 node.js的编译通过

a. 进入 cygwin安装目录/bin/
b. 运行ash.exe
c. 执行./rebaseall -v 命令
d. 正常情况下就OK通过，而我编译出现错误，提示系统临时目录无写入权限
e. 我编译出现错误，提示系统临时目录无写入权限，遂，手动修改了 rebaseall 文件的 83行处代码，如下：

# TmpDir="${TMP:-${TEMP:-/tmp}}"
TmpDir="D:/servers/cygwin_local/temp"

3. 启动cygwin下载 node.js源码编译并安装

$ cd /
$ git clone git://github.com/joyent/node.git
$ cd node
$ ./configure
$ make
$ make install

4. 设置DNS

cygwin内部使用windows的DNS查询，且node.js采用c-ares函数库，而c-ares函数库读取的 /etc/resolv.conf 里的nameserver配置，

所以需要手动建立 /etc/resolv.conf , 并增加以下nameserver 来让node.js执行网络操作时正常运行：

$ vi /ect/resolv.conf

nameserver 8.8.8.8
nameserver 8.8.4.4

5. 测试node.js环境

查看下 node安装信息：

node --version

写个简单的 Http Server来测试下node.js环境，保存一下代码为/worksapce/test.js：

var http = require('http'), port = 8888;

http.createServer(function (request, response) {
response.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8;' });
response.end('你好世界！');
}).listen(port);

console.log('服务已启动 http://127.0.0.1:' + port + '/');
$ node /workspace/test.js

开打浏览器访问 http://127.0.0.1:8888 查看效果

标签：cygwin, js, node, nodejs, win7, windows

动态生成windows快捷方式文件

影之迷惑 — Sat, 02 Apr 2011 07:52:01 +0000

近期改版中涉及到此小需求。就看了下，其实挺简单，这里就做个简单记录，不需要分析了。

简单的使用了PHP语言（其他也一样），扩展性很容易做（稍微做点可变处理就行），所以就没去刻意做，写死效率最高 – -。

[default]
BASEURL=http://www.7k7k.com/?ADTAG=deskto.home
[InternetShortcut]
URL=http://www.7k7k.com/?ADTAG=desktop.home
IconFile=http://www.7k7k.com/favicon.ico
IconIndex=1
HotKey=0
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,2

标签：PHP, shortcut, url, 快捷方式

HTML5 canvas 初级入门教程

影之迷惑 — Sun, 20 Mar 2011 11:38:24 +0000

HTML5 canvas 即HTML5画布，是一个现代浏览器都支持的HTML5非插件绘图的功能，本文将展示如何通过HTML5 canvas API操作canvas元素、绘制图形、改变绘图颜色以及删除图形，让我们开始进入这很酷的新技术的短暂旅行吧。

canvas元素简介

使用canvas元素相当简单，它只是一个单纯的HTML标签，外加宽高两个特性。

上面的代码在页面中插入了一个透明的画布，canvas元素内部的内容可以在不支持canvas功能的浏览器下显示你想给你的用户提供的信息，联想下

影の域 » Web

KISSY DataLazyLoad组件之事件BUG

相关推荐

Path UI by CSS3

相关推荐

移动 Web 开发平台 Rexsee 开源

相关推荐

WordPress Rewrite SEO 之404方式折腾笔记

涉及文件修改列表：

修改回忆录：

相关推荐

[转]利用跨域资源共享（CORS）实现ajax跨域调用

跨域资源共享（CORS）

Preflighted请求

Credentialed请求

结论

相关阅读

相关推荐

[转]IE6、IE7、IE8 CSS Bug兼容解决记录

分页样式

相关推荐

Windows7下搭建Node.js环境

你好世界！

相关推荐

动态生成windows快捷方式文件

相关推荐

HTML5 canvas 初级入门教程

canvas元素简介