IE6、7下position和zindex的一个bug

作者：kun10 发布时间：December 27, 2010 分类：CSS

今天做demo遇到了一个很让人困扰的问题。
页面的头部有一个搜索框，里面有一个表示浮出层的div。

<div class="grandfather">
    <div class="father">
        <div class="popup">
        </div>
    </div>
    <div class="uncle">
         <div class="uncle-popup">
         </div>
    </div>
</div>

基本就是上面的类似的html结构，为了达到浮层不被别的层遮盖的目的
我设定了一下css

    .father {
                position:relative;
                z-index:4;
                width:400px;
                height:400px;
                background:#CCC;
                margin-bottom:-300px;
            }
    .popup {
                position:absolute;
                z-index:100;
                width:100px;
                height:200px;
                background:#999;
    }

可是没想到这样的样式在IE6下面居然被下面的元素给挡住了。
demo如下：地址http://lab.zipeng.info/ie6-position-zindex.html
查其原因，原来是uncle的div里面的元素也有z-index属性，虽然z-index的值比popup的值要小。但还是挡住了father里面的popup(这是关键)。

最后查阅了资料，发现ie67下面要对比两个不同级别的元素的z-index要逐级的向父元素查找。如果父元素没有可比性，那么后面的元素会无视前面的元素的z-index强行覆盖。所以这在IE67下面是要注意。
解决方式也很简单，给父元素加上z-index使他们具有可比性。
哎，在这个IE6走向灭亡的年代才发现这样的问题真是不应该啊~~~

301 vs 302

作者：kun10 发布时间：December 21, 2010 分类：杂七杂八

记得之前处理一些废弃页面的时候做过301跳转，今天抽了个时间看了看301跳转和302跳转的区别。

其实也没什么，搜了两篇英文文章，觉得比较靠谱，大致的看了看。基本明白了302和301的区别。

A 301 redirect means that the page has moved to a new location, permanently. A 302 redirect means, that the move is temporary.

两篇文章：
http://www.hochmanconsultants.com/articles/301-versus-302.shtml

http://www.bigoakinc.com/blog/when-to-use-a-301-vs-302-redirect/

大多数的搜索引擎在收录了301后，会忽略原来的url，如果你搜索这个站点，会搜到新的站点url。

一般来说使用302不是被推荐的，比如你使用js跳转就会被认为是302跳转，而且很多用户其实做302跳转是为了达到301跳转的效果。
各个搜索引擎对于301和302的处理也略有不同。

对google而言，他区分所谓的on-domain的302跳转和off-domain的302跳转，也就是同域名内的302跳转和不同域名的间302跳转。一般来说，同域名的302跳转google的搜索结果会给出跳转前后的两个页面。不同域名的302跳转google只会显示跳转后页面url作为搜索结果。

对于MSN而言，他对于302的处理就和301一样。

对于Yahoo而言，他的处理基本和MSN一致。有一些不一样的是，搜索网站内容的话结果会指向新的站点url，如果搜索页面跳转前url相关内容，引擎搜索结果会是旧的url。

vim简明教程

作者：kun10 发布时间：December 20, 2010 分类：工具箱

Vim简明教程

Vim
View more presentations from amdgigabyte.

想学习Vim的人一定在网上搜罗了很多“同名”的vim的教程，作为一个入门级向中级晋级的Vim前端选手，对于教程里面的内容我是这样安排的。

1、 Vim的简介（个人觉得可以不了解）
2、 Vim的几个简单操作，一些有意思的东西
3、 Vim的几种模式
4、 Vim的vimrc文件配置
5、 前端的Vim该如何配置

一、 Vim的简介


http://www.vim.org/about.php 官网是这样介绍vim的，介绍是鹰文的，配有高清插画。爱好翻译的同学自己可以看。

作为前端为什么我会选择vim呢？
偶然的机会…，我..（各种装X…严重的吸引了我，至少该学学吧）
Vim == Vi improved
Vim被称为是程序员的编辑器，它甚至可以被打造成一个类似ide。但是对于新手而言，他往往像是一匹脱缰的野马，要驾驭好它需要耐心。

我从向往使用到真正使用也花了一些时间的。

如何下载vim：
linux用户可以直接在terminal里面使用sudo apt-get install vim-gnome(ubuntu)
Windows用户可以在官网下载最新的7.3版本的gvim

二、 简单的操作入门


一般来说简明教程都会说，我们来做几个简单的操作。。。
是的，这里我举几个简单的vim操作，先给大家演示一下：

2.1 上下左右的移动


kjhl,当然你也可以使用键盘的方向键来移动，但是使用kjhl绝对有好处，如果你偶尔需要使用linux下面的vi，你会发现习惯使用kjhl会让你在vi下面不至于晕头转向。有一个有意思的插件，让你练习上下左右。有请vim俄罗斯方块。
实际上，你还可以加上数字键来移动，2j就是向下移动两行，2h就是向前移动两个字符。

2.2 更多的移动


w 表示移动到后一个单词开头
b 表示移动到前面一个单词开头
gg 移动到全文的开始
G 移动到全文的结束
^（home按钮）移动到一行的开始
$（end按钮） 移动到一行的最后
H 移动光标到本屏的开头
L 移动光标到本屏的最后
Ctrl + F 下翻一屏
Ctrl + B 上翻一屏
:n或者nG 移动到第n行

2.3 其他的一些常用命令


nyy 复制（Yank）n行
y$ 复制到行尾
yaw 复制一个字符
dd 删除、剪切一整行（如果删除后使用p粘贴，dd表现的就是剪切）
p 粘贴
p[ 粘贴在光标前
p] 粘贴在光标后

缺了点啥？
保存文件？关闭命令？
:w
:q
合体:wq
强制一个命令加上！
:wq!
....

三、 工作模式


1、普通模式：


我们进入vim的时候就是普通模式，在gvim下面普通模式的直观表现可以说是光标是块状的。
大多数情况我们发起命令都是在普通模式下面进行的
例如前面的移动命令、yy（yank）、dd（cut）等。
另外普通模式是切换其他几种模式的基础。
如何回到普通模式，在其他模式下面按ESC就可以回到普通模式。
普通模式的一些有用命令：
w 切换窗口 （在切分屏幕以后的操作）
按方向切换窗口
上一个window
下一个 window

2、插入模式


按a或者i，vim就进入了插入模式，这时候按键盘上面的字符键就会在文本区域输入文字。

3、命令模式


在普通模式下面按英文冒号:进入命令模式，在命令模式下面的命令也有很多，
例如:wq、:tabnew、:vs等。
命令模式里面常用的命令：
:tabnew/:tabe
:tabn/tabnext
:tabp/:tabprev
:vs/:veticalsplit
:split
在普通模式进入命令模式然后输入命令是很常见的一种操作。

4、查找模式


按/+要查询的字符串 回车 vim就会向下查询匹配的字符串。
可以使用正则来匹配文本。

5、选择模式


在普通模式下面按v，进入选择模式。选择模式里面可以利用各种移动命令移动光标，从而完成对文本的选取。选完文本可以对其进行替换操作（s）、删除操作（d）、复制操作（y）等。

6、记录模式


按q可以进入记录模式，此模式会记录接下来你的操作，往往我们可以利用记录模式来记录一段动作。
记录模式允许你使用单个字符（a~z1~0A~Z）来记录一系列的操作。
在普通模式按qa进入以a为标记的记录模式，此时我们输入几个文字，按ESC，再按q结束记录。就完成了简单的输入这几个文字的动作的记录。要重放这一操作，只需要按输入@a就行。

四、 如何提高工作的效率


配置你的_vimrc，加上各种好用的插件，让他有个“ide”该有的样子。

这里主要是在windows下面配置vim，linux下面还是类似的。
什么事vimrc，从几方面来配置一个vim呢？
每个人有自己的想法，下面说说我的想法
首先作为一个新手，你可以从使用一套成熟的vimrc配置开始你的vim之旅，配合一些已设定的快捷键和vim本身的按键来编辑js，html，css
我来说说一个前端的vim里面应该有的一些配置:
正确的文件编码、好看（配色）、使用方便（快捷键）、用vim写的代码要符合规范，有一定的编码辅助工具。
Vimrc就是vim用户自定义的配置文件。
用windows的习惯使用vim：mswin.vim
鼠标可用：mouse=a
设定编码：fenc、fencs、enc
设定颜色：colorscheme=railscasts
快捷键：根据模式来区分快捷键 map
自动补全：dict
模板：tpl
文件树查看器：NERDTree （download it and copy to plugin）
Jslint
Zencoding
YUICompressor
其他的好工具：
Vimwiki（如何安装插件）
五、有助于你学习的资料
Vimmy（随手参考书 for iphone）
:help
http://www.vim.org
明城的pdf: http://www.gracecode.com/archives/274/
Google & Baidu！

jsdoc简明使用教程

作者：kun10 发布时间：December 18, 2010 分类：JavaScript

发现自己没有去用过jsdoc，于是找今天这个时间看看。

其实jsdoc的使用并不难。

jsdoc的主页:http://jsdoc.sourceforge.net/

jsdoc的下载地址:http://code.google.com/p/jsdoc-toolkit/

在安装jsdoc之前你要保证你安装过来jre1.6.0 for windows或者是jre 1.5.9 for linux

下载下来，加压压缩包到D:\jsdoc目录，或者是你喜欢的地方

这就算安装好了jsdoc。

下面就说说使用吧！按我们存放的jsdoc的路径，我们这样运行jsdoc

java -jar D:\jsdoc\jsrun.jar D:\jsdoc\app\run.js -a -e=GBK -t=D:\jsdoc\templates\jsdoc -d=..\..\docs mycode.js

mycode.js就是你的js文件的目录路径
-e 是js文件的编码
-d 是jsdoc对应的docs的文件夹
这样就会生成对应的docs

如果你想给一定的目录结构生成docs，你可以这样写jsdoc命令，把js文件的路径替换成一系列路径

..\..\src\core\ ..\..\src\util\ ..\..\src\widget\

这样我们其实可以编写一个简单的dat文件来简单的批量处理创建docs的任务
如下:

java -jar jsrun.jar app/run.js -a -t=templates\jsdoc -e=GBK -d=..\..\docs ..\..\src\core\ ..\..\src\util\ ..\..\src\widget\

很简单吧。

其实要生成漂亮的文档靠的还是你的良好的注释
具体的格式参考这里：http://jsdoc.sourceforge.net/

Facebook的Changhao jiang博士的分享ppt

作者：kun10 发布时间：December 11, 2010 分类：牛人之整理

Changhao jiang facebook
View more presentations from amdgigabyte.

jiang博士的演讲主要讲解了facebook页面优化的三大技术
我写了一些自己的理解，你可以对着幻灯自己理解一下。

一、quickling


（对页面的刷新使用ajax的方法来模拟，以消除以一些例如顶部导航等不太变动的资源的反复调用，中间需要模拟浏览器重载页面的事件）
个人理解：
最简单的实现可以理解为，用js写一个事件委派，对所有的链接的click事件做捕获，如果链接是新开窗口的，就用ajax的方法去向服务器请求相应的这个页面的html，返回回来替换掉现存页面的内容部分，注意不是替换页面的全部。这样可以请求的时候的资源就小了一些。

quickling遇到的一个问题是，ajax回来的css加载的多了之后客户端会变得缓慢（尤其是低版本的ie），此时可以对quickling设定一个预值，比如当一个页面使用了10次quickling之后就不再使用quickling而重新刷一遍页面，以此循环。

2、pagecache


（对常用的页面的dom缓存于JavaScript中，在重新载入这个页面的时候从客户端调用）
个人理解：
例如facebook的个人主页是被经常的调用的，这时候就对此页面使用pagecache技术，对页面的dom缓存于JavaScript变量中，当用户再次使用这个页面的时候就从JavaScript变量中调用之前缓存的页面dom。这样拼装页面都是在客户端进行的，当然也遇到一些的问题，页面的dom是在载入之后被缓存的，因此用户在页面载入后向服务器做的一些数据的请求导致页面内容的变化将不被记入在原来缓存的变量中，这样下次载入的时候用户会看不到上一次自己对主页做的操作，对此facebook做的工作是记录用户对页面的操作（比如记录下用户的ajax的请求），在下一次使用pagecache的时候像放录像一样的，还原用户之前一次的操作。

3、bigpipe


（页面分为多个pagelet的小区域，通过bigpipe的js，单独的从服务器请求每个pagelet）
个人理解：
原来的页面从服务器到客户端要经历服务器拼装html、网络传输、客户端渲染页面三步。
每一步都需要等待前面的步骤完成才进行
使用bigpipe就是把页面拆分成了很多小的单独的模块（pagelet），通过ajax的方式单独的拼装、传输和渲染这些模块
这样一个页面的多个模块都是单独的进行渲染的，并且这些模块的渲染都不受其他模块是否载入完成的影响，多个模块的载入是并行的。这样一方面可以加速页面的渲染，让页面尽早的展现在用户的面前，另一方面可以自己控制哪一部分先展示，是重要的模块先展示给用户。

7种css圆角方案

作者：kun10 发布时间：December 4, 2010 分类：CSS


看了北京兰梦同学的项目总结，突然觉得之前的项目中的圆角用的很悲催，
于是总结一下吧。

我列了7种圆角方案


多背景


对于一个盒子里面有多个元素用于存放圆角的图形,具体的实现形式比较自由。


滑动门


用一张背景图片+两个嵌套的标签来实现（具体的实现也比较自由）


废弃标签的绝对定位


常用的是s、b标签，往往局限于1px半径的圆角

<div class="s-abs">
<s class="tl"></s>
<s class="tr"></s>
<div id="s-abs">
</div>
<s class="bl"></s>
<s class="br"></s>
</div>

废弃标签+背景图定义两层圆角


百度知道的方案，分三层盒子

  1. 最外层用来存放圆角和里面的盒子
  2. 第二层盒子是容器的外层边框，不要设定此元素的大小，其高度由内部元素决定
  3. 第三层盒子是容器的内边框的展示，可以设定高度，或者其高度由内部元素决定
  4. 四个圆角使用一个圆圈形空心背景，设定不同的background-position，上边角dom位置放在第二层盒子的上面，下边角dom位置放在第二层盒子的下面
<div class="b-border">
<b class="tl"></b>
<b class="tr"></b>
<div id="b-border">
<div id="b-border-inner">
</div>
</div>
<b class="bl"></b>
<b class="br"></b>
</div>

纯div圆角实现的方式


没有css图片的参与

<div id="div-corner-outer">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod4"></div>
<div id="div-corner"></div>
<div class="rod4"></div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod1"></div>
</div>

相对+绝对定位实现1px圆角


外层的div使用相对定位，里面的div使用绝对定位，通过宽度的不一，实现1px的圆角

<div id="border-relative">
<div id="border-abs-inner"></div>
</div>

牺牲IE 6 7 吧


使用border-radius相关属性

不多说，demo奉上~~~

欢迎大家提供更多方案。

  1. 1