对于正则的使用，先前一直都是一个概念性的东西，只是知道用它可以匹配字符格式。后来在项目中遇到关于字符操作的问题，才开始着手对正则进行一些了解。而对于当时的那种了解，也只不过是项目的一时所需，只找到了适合自己的代码，然后应用到项目使用。因此从没有真正的去系统的学习。今天在订阅中看到幸福收藏夹转载的一篇关于javascript正则表达式的教程，看了一段以后就了解了关于正则表达式很多基础的系统性东西，因此转过来分享一下，也方便以后自己的复习。

网上正则表达式的教程够多了，但由于javascript的历史比较悠久，也比较古老，因此有许多特性是不支持的。我们先从最简单地说起，文章所演示的正则基本都是perl方式。

元字符

( [ { \ ^ $ | ) ? * + .

预定义的特殊字符

字符类

简单类

原则上正则的一个字符对应一个字符，我们可以用[]把它们括起来，让[]这个整体对应一个字符。如

alert(/ruby/.test("ruby"));//true
alert(/[abc]/.test("a"));//true
alert(/[abc]/.test("b"));//true
alert(/[abc]/.test("c"));//true
alert("a bat ,a Cat,a fAt bat ,a faT cat".match(/[bcf]at/gi));//bat,Cat,fAt,bat,faT,cat

负向类

也是在那个括号里做文章，前面加个元字符进行取反，表示匹配不能为括号里面的字符。

alert(/[^abc]/.test("a"));//false
alert(/[^abc]/.test("b"));//false
alert(/[^abc]/.test("6"));//true
alert(/[^abc]/.test("gg"));//true

范围类

还是在那个中括号里面做文章。有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以用它。特征就是在中间加了个横线。

组合类

还是在那个中括号里面做文章。允许用中括号匹配不同类型的单个字符。

alert(/[a-f]/.test("b"));//true
alert(/[a-f]/.test("k"));//false
alert(/[a-z]/.test("h"));//true
alert(/[A-Z]/.test("gg"));//false
alert(/[^H-Y]/.test("G"));//true
alert(/[0-9]/.test("8"));//true
alert(/[^7-9]/.test("6"));//true
 
alert(/[a-m1-5\n]/.test("a"))//true
alert(/[a-m1-5\n]/.test("3"))//true
var a = "\n\"
alert(/[a-m1-5\n]/.test(a))//true
alert(/[a-m1-5\n]/.test("r"))//false

预定义类

还是在那个中括号里面做文章，不过它好像已经走到尽头了。由于是中括号的马甲，因此它们还是对应一个字符。

alert(/\d/.test("3"))//true
alert(/\d/.test("w"))//false
alert(/\D/.test("w"))//true
alert(/\w/.test("w"))//true
alert(/\w/.test("司"))//false
alert(/\W/.test("徒"))//true
alert(/\s/.test(" "))//true
alert(/\S/.test(" "))//false
alert(/\S/.test("正"))//true
alert(/./.test("美"))//true
alert(/./.test("  "))//true
var a = "\n\"
alert(/./.test(a))//true

量词

由于元字符与特殊字符或字符类或者它们的组合（中括号）甚至它们的马甲（预定义类）都是一对一进行匹配。我们要匹配“司徒正美这个词”，最简单都要 /…./，如果长到50多个字符岂不是要死人。因此我们逼切需要一个简单的操作，来处理这数量关系。

简单量词

alert(/..../.test("司徒正美"))//true
alert(/司徒正美/.test("司徒正美"))//true
alert(/[\u4e00-\u9fa5]{4}/.test("司徒正美"))//true
alert(/[\u4e00-\u9fa5]{4}/.test("司徒正美55"))//true
alert(/^[\u4e00-\u9fa5]+$/.test("正则表达式"))//true
alert(/^[\u4e00-\u9fa5]+$/.test("正则表达式&*@@"))//false
alert(/\d{6}/.test("123456"))//true
alert(/[ruby]{2}/.test("rr"))//true
alert(/[ruby]{2}/.test("ru"))//true
alert(/[ruby]{2}/.test("ry"))//true

/[\u4e00-\u9fa5]/用于匹配单个汉字。

贪婪量词，惰性量词与支配性量词

贪婪量词，上面提到的所有简单量词。就像成语中说的巴蛇吞象那样，一口吞下整个字符串，发现吞不下（匹配不了），再从后面一点点吐出来（去掉最后一 个字符，再看这时这个整个字符串是否匹配，不断这样重复直到长度为零）

隋性量词，在简单量词后加问号。由于太懒了，先吃了前面第一个字符，如果不饱再捏起多添加一个（发现不匹配，就读下第二个，与最初的组成一个有两个 字符串的字符串再尝试匹配，如果再不匹配，再吃一个组成拥有三个字符的字符串……）。其工作方式与贪婪量词相反。

支配性量词，在简单量词后加加号。上面两种都有个不断尝试的过程，而支配性量词却只尝试一次，不合口味就算了。就像一个出身高贵居支配地位的公主。 但你也可以说它是最懒量词。由于javascript不支持，所以它连出场的机会也没有了。

var re1 = /.*bbb/g;//贪婪
var re2 = /.*?bbb/g;//惰性
//  var re3 = /.*+bbb/g;//支配性,javascript不支持，IE与所有最新的标准浏览器都报错
alert(re1.test("abbbaabbbaaabbbb1234")+"");//true
alert(re1.exec("abbbaabbbaaabbbb1234")+"");//null
alert("abbbaabbbaaabbbb1234".match(re1)+"");//abbbaabbbaaabbbb
 
alert(re2.test("abbbaabbbaaabbbb1234")+"");//true
alert(re2.exec("abbbaabbbaaabbbb1234")+"");//aabbb
alert("abbbaabbbaaabbbb1234".match(re2)+"");//abbb,aabbb,aaabbb

分组

到目前为止，我们只能一个字符到匹配，虽然量词的出现，能帮助我们处理一排密紧密相连的同类型字符。但这是不够的，下面该轮到小括号出场了，中括号 表示范围内选择，大括号表示重复次数。小括号允许我们重复多个字符。

//分组+量词
alert(/(dog){2}/.test("dogdog"))//true
//分组+范围
alert("baddad".match(/([bd]ad?)*/))//baddad,dad
//分组+分组
alert("mon and dad".match(/(mon( and dad)?)/))//mon and dad,mon and dad, and dad

反向引用

反向引用标识由正则表达式中的匹配组捕获的子字符串。每个反向引用都由一个编号或名称来标识，并通过“\编号”表示法进行引用。

var color = "#990000";
/#(\d+)/.test(color);
alert(RegExp.$1);//990000
 
alert(/(dog)\1/.test("dogdog"))//true
 
var num = "1234 5678";
var newNum = num.replace(/(\d{4}) (\d{4})/,"$2 $1");
alert(newNum)

候选

继续在分组上做文章。在分组中插入管道符（“|”），把它划分为两个或多个候多项。

var reg = /(red|black|yellow)!!/;
alert(reg.test("red!!"))//true
alert(reg.test("black!!"))//true
alert(reg.test("yellow!!"))//true

非捕获性分组

并不是所有分组都能创建反向引用，有一种特别的分组称之为非捕获性分组，它是不会创建反向引用。反之，就是捕获性分组。要创建一个非捕获性分组，只 要在分组的左括号的后面紧跟一个问号与冒号就行了。

var color = "#990000";
/#(?:\d+)/.test(color);
alert(RegExp.$1);//""

题目，移除所有标签，只留下innerText!

var html = "
 
<a href="http://www.cnblogs.com/rubylouvre/">Ruby Louvre</a>by <em>司徒正美</em>
 
";
var text = html.replace(/&lt;(?:.|\s)*?&gt;/g, "");
alert(text)

注意：javascript不存在命名分组

前瞻

继续在分组内做文章。前瞻与后瞻其实都属于零宽断言，但javascript不支持后瞻。

正向前瞻用来检查接下来的出现的是不是某个特定的字符集。而负向前瞻则是检查接下来的不应该出现的特定字符串集。零宽断言是不会被捕获的。

var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?=room))///在我们捕获bed这个字符串时，抢先去看接下来的字符串是不是room
alert(reBed.test(str1));//true
alert(RegExp.$1)//bed
alert(RegExp.$2 === "")//true
alert(reBed.test(str2))//false
 
var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?!room))/  //要来它后面不能是room
alert(reBed.test(str1))//false
alert(reBed.test(str2))//true

题目，移除hr以外的所有标签，只留下innerText!

var html = "
 
<a href="http://www.cnblogs.com/rubylouvre/">Ruby Louvre</a>
 
<hr />
 
by <em>司徒正美</em>
 
";
var text = html.replace(/&lt;(?!hr)(?:.|\s)*?&gt;/ig,"")
alert(text)//Ruby Louvre<hr />by 司徒正美

边界

一个要与字符类合用的东西。

题目，设计一个字符串原型方法，实现首字母大写！

var a = "ruby";
String.prototype.capitalize =  function () {
     return this.replace(/^\w/, function (s) {
            return s.toUpperCase();
            });
        }
       alert(a.capitalize())//Ruby

单词边界举例。要匹配的东西的前端或未端不能为英文字母阿拉伯字数字或下横线。

var str = "12w-eefd&efrew";
alert(str.match(/\b\w+\b/g))//12w,eefd,efrew

var str = "JS's Louvre";
var reg = /\w/g;
alert(reg.exec(str));//J
alert(reg.lastIndex);//1
alert(reg.exec(str));//S
alert(reg.lastIndex);//2
alert(reg.exec(str));//s
alert(reg.lastIndex);//4
alert(reg.exec(str));//L
alert(reg.lastIndex);//6

相关日志

• 网页测试工具分享
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• 常用正则表达式速查
• jQuery 1.4 的新特性

如今的浏览器市场，依然角逐着各种来自不同厂商不同核心的浏览器。优胜略等，时间和用户总会替我们前端开发者主持公道，去筛选出最具竞争力的产品。

有需求就会有市场，有市场就会有产品，现在的浏览器市场已经不再是当年孤立兼容的时代了。需求促使了标准的产生，于是现在的竞争取而代之的则是运行速度，易用性，扩展性，和标准兼容性。

虽说有着W3C标准化组织给我们前端开发者做坚强的后盾，可是由于各浏览器厂商对标准的理解与对自身功能的强大，兼容性依然是我们前端开发者不可避免的话题，当然还有那个老不死的IE6，虽说覆灭已是命运使然，恶心的是很多用户依然依赖于很长一段时间对它的使用习惯，更恶心的是国内某些浏览器厂商沿用IE6核心换了身皮毛就以自有名称独居的浏览器，以上种种不得不让我们前端人员嗤之以鼻，可是排斥归排斥，我们无法决定用户的选择，但是我们开发者依然要照顾用户，由此衍生的兼容问题就愈发显得明显了。

还是这句话：有需求就会有市场，有市场就会有产品。因此既然市场有兼容性问题，那么由此衍生的测试工具也是层出不穷，在这里，分享几个我经常会用到的测试工具给大家：

IEtest

• 性质：客户端程序
• 使用方式：下载安装到计算机 
• 浏览形式：正常网页
• javascript：支持
• 官方下载地址：http://www.debugbar.com/download.php
• 支持浏览器：IE5.5、IE6、IE7、IE8

想必对于这个工具大家都很熟悉了，一个针对IE浏览器的测试的工具，可以测试IE5.5+的各版本IE浏览器，使用方法是把程序安装到本地，然后运行就会出现一个类似于浏览器的窗口（其实直接可以拿来当浏览器用的说），工具栏分布着代表各浏览器的黄色button，点击任意一个便会生成对应浏览器核心的tab。

不过貌似自09年10月更新到4.2版本后就没有新的版本发布，我想说的是4.2版本在win7下经常崩溃。

Spoon

• 性质：网页程序+浏览器插件+沙盘
• 使用方式：下载插件，安装浏览器沙盘程序，在网页点击打开已下载的浏览器沙盘程序
• 浏览形式：正常网页
• javascript：支持
• 使用地址：http://spoon.net/browsers/
• 支持浏览器：IE6、IE7、IE8、Firefox3.5、Firefox3、Firefox2、Safari4、Safari3、Chrome、Opera10、Opera9

这个是我经常用的测试工具，使用方法很简单，就是先打开它的首页，然后在随意一个代表浏览器的小窗口点击下载一个浏览器插件，安装完成后再点击对应浏览器小窗口便开始安装对应浏览器沙盘程序，安装完成后再点击浏览器小窗口就会打开对应浏览器了，这个浏览器和真正的浏览器一摸一样，而且弹出的窗口也是应用程序，并且我们也不用担心病毒，因为它是在沙盘中运行的。

Adobe  lab

• 性质：网页flash程序
• 使用方式：打开网页，登陆adobe账户，直接使用
• 浏览形式：网页缩略图
• javascript：不支持
• 使用地址：https://browserlab.adobe.com/index.html
• 支持浏览器：IE6、7、8；Firefox2、3、3.5 for Win or Mac OS；Safari3.0、4.0 for Mac OS

这个Adobe的产品就是强大，一下子支持这么多浏览器不说，而且还支持不同系统下的浏览器，不过它的缺陷也很明显，由于是基于flash程序，因此加载网页速度很慢，并且加载出来的东西不是HTML而是一张图片，因此就实用性来说并不大，它最显著的功能在于你能通过它知道你要测试的网页在各种浏览器下是什么样子，而且它可以生成两个网页左右对比，也可以进行网页重叠对比，至于其他，我还是建议你用上面推荐的测试工具吧，毕竟它不能用来测试你的javascript！

Microsoft Expression Web 3 SuperPreview

性质：客户端程序

使用方式：下载程序安装到本地运行

浏览形式：网页缩略图，带HTML结构，可以用自带选择器选择html结构

javascript：不支持

下载地址：http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreviewIE_en.exe

支持浏览器：IE6、7、8

这个是微软官方出品的测试工具，通过它可以很强大的调试IE各浏览器环境下的网页显示bug，可惜的是它同样不支持javascript的调试。详细内容可以参照我以前的一篇文章

《体验篇：Microsoft Expression Web 3 SuperPreview全攻略》

有了这些工具，让你的测试变的更简单些吧！可能你还有更好的测试工具，如果真是如此，那么不妨也拿出来分享给大家呗！

原著资源，转载请著名并链接到出处 Pivot Code，谢谢！

相关日志

• 第六期web标准化交流会短记
• 基础Javasctipt正则表达式
• 第六期web标准化交流会心得
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• “IETester”微软官方产品SuperPreview之感慨篇

CSS Please是一个在线生成跨浏览器的CSS3代码生成器，通过它可以生成已支持CSS3属性的浏览器兼容性代码。

以下是我整理的中文翻译版本：

地址：http://www.pivotcode.com/demo/css3compatibility/css3compatibility.html
示例：

这是英文原版地址：http://css3please.com

此程序参考源来自《前段观察》：http://www.qianduan.net/css3-please.html

相关日志

• HTML5初探——个人HTML5简历
• CSS结合单图定位制作的一个漂亮的投票应用
• CSS重构（CSS Reset）
• CSS五个常见却不常用的属性
• css命名规则

那么我们需要怎样的习惯呢？这个还是要靠自己在项目中积累了。以前我在初学时也是复制别人的CSS Reset代码，然后再进行自己的项目，可是有的时候我发现有些没必要重构的样式在之前重构掉了，在单独到一个样式定义时，我还需要给他重新写上，而且，在不同的项目下的重构样式也会各不相同，例如一个图片网站和一个博客网站。因此，我往往都是简单的重构一些必须的样式，后期用到需要重构的额外再写，因此我的习惯就是随用随加。

今天在博客园里看到了一篇文章中的十个重构的例子。接下来就是剽窃的内容了：

一、Generic Reset CSS

* {
padding: 0;
margin: 0;
border: 0;
}

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。

二、Ateneu Popular CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

三、Chris Poteet’s Reset CSS

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

四、Yahoo’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}

五、Eric Meyer Reset CSS

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

六、Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

七、Christian Montoya Reset CSS

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

八、Rudeworks Reset CSS

* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

九、Anieto2K Reset CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十、CSSLab CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

以上方法大同小异，需求不同因而方法不同，一个好的重构代码是即能达到自己想使用的效果，又能提高自己的效率，更能节省不必要浪费的资源，还可以节省不必要浪费的代码，这才是重构最终要实现的目的。

部分代码转自：博客园 – 基于B/S模式的设计与开发

相关日志

• CSS结合单图定位制作的一个漂亮的投票应用
• CSS3兼容代码生成器——css-please
• CSS五个常见却不常用的属性
• css命名规则
• css文字阴影

这个效果也应用在人人网的个人首页底部的工具栏。

常去人人网的朋友肯定会发现，如果用IE6浏览器访问人人网的话，这个工具条以前是不存在的。后来，人人已经通过js实现此功能，但是它的效果和正常浏览器下访问是不同的，即每当拖动滚动条它就会隐藏，当停止时再出现。所以，值得肯定的是IE6不支持这个position的fixed属性。

这个问题也一直都在困扰着我，因为我一直都在想把这个效果实现在我的一个项目上，而又避开使用javascript。

后来在‘幸福收藏夹’博客，找到了解决方案——利用position:absolute定位在IE6下实现固定定位的效果，以下是实现原理：

fixed元素的绝对位置相对于HTML元素，滚动条则是基于body元素而不属于html元素。
当我们拖动滚动条滚动的时候，内容都会随窗口滚动，这时滚动的是body元素。HTML元素被浏览器判定为相对定位的根级元素，而我们定义的position:absolute元素也在HTLML元素当中，属于HTML元素的子元素。因此我们所定义的absolute元素会根据HTML元素的大小而进行绝对定位。如果我们未曾对HTML元素设置样式的情况下，它的大小是随内容的大小而变的,这样一来如果我们在其中使用绝对定位，并不能实现我们想得到的固定定位的效果。因此我们需要给我们需要绝对定位元素的相对定位盒模型指定一个绝对大小，即窗口当前的大小。但是body元素仍需保持其原有大小，否则就没有滚动条了。这时我们需要将超出HTML元素的内容隐藏掉，就可以让HTML元素永远保持在一个固定大小了。

代码如下：

html{overflow:hidden;} // Important（必须）。
body{overflow:auto;height:100%}

代码规定了html将只有当前窗口的大小，溢出的内容隐藏。但是body仍会随高度自动变化。于是我们就可以利用position:absolute来把元素固定在窗口任意位置了。例如仿人人网定位元素在底边：

示例的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie6-position-fixed-bug</title>
<style>
* {
	padding:0;
	margin:0;
}
html{_overflow:hidden;}/*IE6hack,必须*/
body{height:100%;overflow:auto;}
#footer .bottom {
	width:580px;
	height:20px;
	background-color:#ddd;
	border:1px solid #aaa;
	position:fixed;
	_position:absolute;/*IE6hack,必须*/
	bottom:0;
	left:50%;
	margin-left:-290px;
}
</style>
</head>
<body>
<div>
<h1>测试定位</h1>
占位文字
</div>
<div id="footer">
  <div class="bottom"></div>
</div>
</body>
</html>

注：本文参考自幸福收藏夹

相关日志

• 也谈IE6下block元素float多出文字BUG
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• css文字阴影
• IE6下图像的最大宽度

window.onload=function(){
    var leftDiv=document.getElementById("divleft");//获取左侧div的id
    var rightDiv=document.getElementById("divright");//获取右侧div的id
        //当右侧滚动条滚动时，左侧滚动条的位置等于右侧滚动条位置
	rightDiv.onscroll=function(){
    	        leftDiv.scrollTop=rightDiv.scrollTop;
		}
        //当左侧滚动条滚动时，右侧滚动条的位置等于左侧滚动条位置
	leftDiv.onscroll=function(){
		rightDiv.scrollTop=leftDiv.scrollTop;
		}
}

示例

随机日志

• 每一年，这一天
• 网恋是自己努力吹起的肥皂泡
• 基础Javasctipt正则表达式
• 庚寅，二十一，惊蛰
• CSS五个常见却不常用的属性

这篇是SuperPreview软件的体验篇，之前有一篇SuperPreview的感慨篇，如果您对其有兴趣可以点击这里《“IETester”微软官 方产品SuperPreview之感慨篇》

牢骚发过了，现在来看看这款软件给我们带来的革命吧！

如果您还没有下载，点击这里下载Microsoft Expression Web 3 SuperPreview（官方地址）

如果您已下载成功，那么跟我一起开始把它安装到自己的电脑里面吧！（高手绕路）

首先运行刚刚下载好的文件，运行后会出现如下步骤：

step1：License agreement 许可协议，当然是点Accept接受了

setp2: Installation 安装，点击options会出现如下图所示的更改路径界面，默认是c:\Program Files\Microsoft Expression（我习惯性吧应用程序放D盘,因此我这里显示的是d:\Program Files\Microsoft Expression），您也可以选择自己喜欢的安装路径。选择好安装路径后，点击install。

step3、安装等待……

step4、安装成功后的感谢界面，下面有个按钮View release notes查看发行声明，点击会到微软官方的说明网站，这里选择Finish按钮，完成。

这样就把Super Preview安装到电脑了，现在点击桌面的图标开始体验吧！

打开等待界面……

之所以放上这个安装步骤，其实主要原因是我很喜欢它的UI（用户界面），毕竟使用这个软件的人都是前端工程师，都是对审美有需求的，自然我也不例外，其实微软近期发布的新产品UI都全换成类似于这样的了，例如Office2010,毕竟是有影响力的企业，UI总是有我们可以借鉴的地方，比如配色，构图等等。一个好的设计师并不是天生的，而是用时间和经验还有欣赏所积累的。

接下来，就是我们的SuperPreview窗口了。

如此，您看到的便是期待的、传说的、神秘的Microsoft Expression Web 3 SuperPreview整个界面了。可能它并不像我们想像的那样完美，比如它会看起来更像是浏览器，可惜，它不是，而是更像一个类似于图形图像软件的页面调试工具，正如它的界面所传达的信息一样，它会把我们将调试的网页生成一张全览图，类似于Adobe公司的browserlab。

不过值得庆幸的是，它也并没有那么糟糕，虽然我们看到的是一张我们网页的全览图，但是它会生成我们布局中所用到的任何一个元素位置，然后通过一个类似于FireBug的选择工具来选取我们想了解的元素，并且点击它会显示这个元素的大小、左边的距离值，和顶部的距离值，这样我们就可以通过左右对比来判断在IE6和IE8下布局中元素的布局差别了。

如图所示，这是此网站在superpreview下的IE6（左）和IE8（右）的对比，我用鼠标选择了导航的首页按钮（当选择任意一边时，另一边会同时选择），然后会同事在对比窗口左下角显示这个元素的信息，其中两侧数据不同的地方，信息位置会把差异值显示成红色。

点击界面右下角的DOM（Document Object Model文档对象模型）按钮，可以在界面下方弹起一个类似于FireBug的调试窗口，并显示出在对应浏览器下所有的元素（如果使用了判断注释，例如[if IE6]那么在IE8下将不显示其中的DOM）。和选择图中的元素一样，当点击任何一边的标签时，右侧的标签便会一起选中，并显示其数值。

其它功能

在界面顶部是SuperPreview软件的功能区，从左向右依次是：

1.1、Selection Model选择器，快捷键（V）（通过它选择任何想得到的界面中元素）

1.2、Panning Model拖动，快捷键（H）（拖动界面视图到需要的位置，拖动任意一方，另一方会一起移动到相同位置）

2.1、凸显方式:Box highLighting Model圈中元素，快捷键（L）（如上图样式）

2.2、凸显方式：Light-Out highlighting Model高亮元素,快捷键（L）（下图样式）

3.1、Toggle ruler visiblity切换标尺可见性，快捷键（R）（点击打开和关闭边缘的标尺）

3.2、Toggle thumbnail visiblity切换缩略图可见性，快捷键（T）（点击会在窗口右下角显示一小条网页的全景缩略图）

3.3、Toggle guide visiblity切换指示的可见性，快捷键（Ctrl+；）（没用出效果）

4.1、Vertical Split Layout垂直分割布局，快捷键（A）（上面截图所呈现的布局样式）

4.2、Horizontal Split Layout水平分割布局，快捷键（S）（上下显示布局）

4.3、Overlay Layout覆盖布局，快捷键（D）（重合显示两个窗口中的网页）

4.4、Single Layout单一布局，快捷键（F）（显示其中一个页面，然后通过下侧的tab切换当前显示）

5.1、地址栏

5.2、路径选择按钮

5.3、刷新

6、缩放比例（可以从中选择，也可以选中更改，还可以拖动鼠标实现缩放）

7、帮助

顶部的功能栏，到这里就介绍完了，如此整个软件介绍也差不多就是这些了，不过还有一个强大的功能，那就是底部的tab。

底部tab是显示的当前正在调试的网页，类似于我们浏览器的tab，但是如果这么想那就错了，仔细看：

如图所示，最左侧是我打开的IE6窗口，右侧依次是IE8和IE7，发现右侧右下方的加好了么，点击那个的话，如果我们新建立的是IE6窗口，那么最左侧的IE6会并合到右侧的tab里和IE8、7并列显示。自然，如果在左侧新建IE7的话，那么右侧并列显示的IE6就会跑到左侧Tab了。

另外一个细节是在软件右下角有个调整分辨率的选择器，通过它可以选择不同分辨率下我们要测试网页的显示效果。

好了，那么讲到这里就是我发觉到SuperPreview这个软件全部的功能了，如果您发觉到我没有发现的更好的功能，欢迎留言指出，或提供分享。谢谢！

不足：

任何东西都不会完美，这个软件虽然带给我们很大的便利，但是它还是存在一些令人讨厌的体验。

1、网页打开速度很慢

2、如果新建tab的话，它不会独立加载显示新建tab的页面，而是让我们刷新全部打开的tab。

3、只能针对一个网站测试

4、不能时时更改，类似于FireBug的功能

5、调试Javascript就更别想咯……

因此，虽然有了SuperPreview，但是我们还是不能摆脱安装古典浏览器的命运。希望微软能再改进改进吧！

谢谢观赏！

相关日志

• “IETester”微软官方产品SuperPreview之感慨篇
• 微软实验室产品Pivot浏览器初体验
• 基础Javasctipt正则表达式
• 网页测试工具分享
• IE9 Platform Preview——IE9预览版本

这篇是SuperPreview软件的体验篇，之前有一篇SuperPreview的感慨篇，如果您对其有兴趣可以点击这里《“IETester”微软官 方产品SuperPreview之感慨篇》

自从把我的XP系统换成Windows7之后,IETester就不好好工作了!不是运行时错误重启tab,就是IE7无法访问测试本地文件。不过我并没有就此放弃它，我总觉得IETester的开发人员会尽快修复这个BUG,但是用到现在，每次我打开IETester都会习惯性的去点更新，可每次得到的结果都是“您安装的已经是最新版本”。身为一个web前段开发者来说，这无疑是一个压在心头的石头，如果让我在那么好用的操作系统和已经过时的IE7浏览器调试之间选择，我很想放弃浏览器，但是毕竟那是我吃饭用的一根筷子，丢不得啊。情急之下，我只好用安装双系统的方法来解决应急之需，后来觉得总是重启电脑也不是办法，即耽误时间又中断思路。

后来发现搜狗浏览器用的是IE7的内核(鄙视一下，用还不用好的),于是我就把搜狗浏览器装上了。这样我在测试时IETester运行IE6，搜狗调试IE7,电脑自带IE8,加上Firefox,Chrome,Opera,Safari一一安装到电脑，这样一来，市面上的主流浏览器就齐了。后来觉得搜狗浏览器的用户体验很是垃圾（个人见解），尤其是在任务转换的时候，平时按Alt+tab一次转换的任务，在搜狗下要按两次，多少次的冲动我都想把搜狗置于万劫不复。谁叫我暂且依赖于它呢？另外一个方案http://spoon.net/browsers/网站提供一个沙盘运行的浏览器插件，安装上去后，它可以运行当前主流浏览器的多数版本，如IE6、7、8,Safari3、4，火狐2、3、3.5，Opera9、10和Chrome。后经win7测试，IE7也是不可以运行，看来一山不容二虎在电脑上一样适用——一系统不容二7呀！

不过现在好了，算是一个前段开发者的福音吧！微软官方推出IE6、7、8的官方测试软件——Microsoft Expression Web 3 SuperPreview（好长的名字）。

也不知道微软此举是该表扬呢还是该骂，值得表扬的是它终于为它曾经开发的的烂产品做了一个交代，让我们前段人员不再为了做一个网页而去下载几个不同版本的IE浏览器做调试了，而且在同一系统下不能同时安装。这也算是微软为以前的错误而付出的代价吧。

值得一骂的是，你早干嘛去了，首先，你不该把没有开发成功BUG重重的产品投入市场——IE6，其次，你不该发布稍做改动就当其是一次浏览器革命的IE7,再者，你不该让IE8孤立在IE6包围的环境中。IE6早该死了，无论XP系统怎样。如果上一个操作系统不是失败的vista而是如今的win7的话，估计现在IE8的市场份额依然处于浏览器市场的辉煌地位。可惜，当初错误的产品注定了微软浏览器现在的处境——浏览器市场正在被新生的Firefox和Chrome吞噬。如今只能期盼今年即将发布的IE9能有新的突破了。但是不知道对于人们或者早已改变的使用习惯，微软的IE9能否力挽狂澜，如果Microsoft live labs下的Pivot浏览器是一个IE9的前瞻技术预览的话，那么我想IE9会是一场革命（不过微软应该考虑一下IE9的运行环境和硬件需求，如果还像Pivot的话，囧），我想微软肯定不会眼看着自己的孩子被别人超越的。那么我们姑且对IE9翘首以盼吧！延伸阅读:《微软实验室产品Pivot浏览器初体验》。

好了，有了Microsoft Expression Web 3 SuperPreview我们可以抛弃IETester了，也可以不用为IETester的bug而用国产的寄生浏览器来弥补了，但是还是要感谢Windows XP时代下IETester为前段工程师所做的贡献。

相关日志

• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• 微软实验室产品Pivot浏览器初体验
• 网页测试工具分享
• 第六期web标准化交流会心得
• 第六期web标准化交流会短记

匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(\S*?)[^>]*>.*?</>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^\s*|\s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]$
评注：表单验证时很实用

匹配国内电话号码：\d-\d|\d-\d
评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]
评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]\d(?!\d)
评注：中国邮政编码为6位数字

匹配身份证：\d|\d
评注：中国的身份证为15位或18位

匹配ip地址：\d+\.\d+\.\d+\.\d+
评注：提取ip地址时有用

匹配特定数字：
^[1-9]\d*$　 　 //匹配正整数
^-[1-9]\d*$ 　 //匹配负整数
^-?[1-9]\d*$　　 //匹配整数
^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

相关日志

• 基础Javasctipt正则表达式
• CSS五个常见却不常用的属性

如果非要这么说，那么我不会去否认，因为经过测试Pivot浏览器就内核来说和IE8没有什么分别，而且硬件的要求有点过分了，我电脑双核E5200 Core 双核2.0CPU、2G内存，安装Pivot浏览器后运行竟提示错误。经过测试是因为没有显卡的原因，加上显卡后运行正常。以下是Pivot官网提供的安装环境需求清单：

System Requirements

Recommended System Configuration: Windows 7 with Aero enabled, 2-GHz 32-bit (x86) processor, 2 gigabytes of random access memory.

推荐系统配置：启用了Aero效果的win7系统，2GHZ 32位CPU，2G独立内存。

Supported System Configuration: Windows Vista with Aero enabled, 2-GHz 32-bit (x86) or 64-bit (x64) processor.

可以支持的系统配置：启用了Aero效果的Vista系统，2GHz 32位或64位CPU

Minimum Graphics Requirements: 256 megabytes of video memory. Pivot does not support most Intel integrated video chipsets.

最低显卡配置：256M显存。并且不支持大多数的Intel集成显卡。

Pivot requires .NET Framework 3.5 SP1 and Internet Explorer 8. Pivot will import your browsing history from Internet Explorer and Firefox during installation.

电脑需要有.NET Framework 3.5 SP1 和 Internet Explorer 8.安装完成后，浏览器将自动导入IE和火狐的浏览历史等信息。

Windows XP is not supported. Pivot only displays in English (US).

XP系统不支持，浏览器仅有英文版本……

如此说来，我只能在公司电脑运行这个微软新生儿Pivot了……

所以它的第一个缺点是硬件需求比较高。囧。

初次打开Piovt,它会显示主功能提示信息,如图所示：

1、导航按钮：点击会在地址栏下方，以下拉菜单的形式显示一行当前tab的浏览历史页面缩略图。如图：

2、Favorites and Tags: 当打开一个新的网页时，这个位置会显示一个五角星，点击五角星便会将当前网页加入收藏，此时五角星会变成tag标签图标，点击这个图标，地址栏会出现提示输入标签以逗号间隔。如图所示：

3、Exploring  the Web: 网页显示窗口，而不仅仅只用于网页浏览。

4、Zooming Scrollbar: 可以缩放的滚动条，点住滚动条向左拖动会缩放整个网页直到整个网页大小，并且会有一个框选中当前浏览器窗口显示区域，上下拖动还可以实时重选。如图所示：

5、Quick Links: 在发现一个你喜欢的网页时，点击右侧那个箭头便可以把当前网页保存到快速链接表里，并以网站的favicon图标为按钮显示在浏览器下方，当你想打开它时，直接点击图标便可。在箭头下方的按钮是把已收藏在此栏上的网站以缩略图方式显示在窗口里。在快速链接的左侧被一条竖线隔开的是首页和历史链接按钮，点击首页按钮它会显示类似苹果浏览器的Top Sites功能，更好的是，在页面预览图的下方会显示一个最近关闭的tab列表，如图所示：

这个区域的功能还没有结束，在首页按钮右边的是历史按钮，点击它会出现按日期归档竖列横排显示的历史浏览页面缩略图,如图所示：

5.1、Exploring Collections(搜索集):点击项目可以查看更精确的预览，鼠标滚轮可以控制缩放，当屏幕放大后，还可以点住鼠标左键实现拖拽预览。（Ming注:此历史功能堪称强大之处就在于它的信息过滤和具有相当酷炫效果的动画预览，点击时间可以实现时间递归历史浏览网页，一层层的精确到秒）

5.2、Veiws（视图）:拖动滑块也可以实现缩放，右侧按钮是预览的方式切换。

5.3、Filters（过滤器）：使用过滤器筛选条件 ，缩小搜索范围。（Ming注：此处便是传说中的过滤器，左边栏一竖排都是控制条件列表，分别有：关键字过滤、站点过滤、搜索历史、访问日期、标签等来控制右侧历史的排序和显示，

关键字过滤器：展开此列会显示一个‘输入一个关键字（Enter a new keyword）’按钮，点击此时地址栏会提示输入‘过滤类型(Type to filter)’这时输入关键字并回车，便会实现过滤，并且输入历史会以复选框方式显示在关键字过滤器列表，那么以后通过左侧选中一个关键字便可实现过滤。


站点过滤器：此过滤器会以访问过网站的主域名和二级域名在左侧生成一个带有复选框的列表，通过选择主域名和二级域名分类显示相关目录的历史，从而便能更快速的定位搜索内容。

搜索历史：效果一样，同样是在列表生成带有复选框的列表，不同的是，这里是你搜索过的内容。

访问日期：效果一样，不同的是这里是访问日期列表，分栏显示，最上边是今天、昨天、一周。然后是月、年……

这个没整明白……

标签：效果一样，不同的是这里显示的是自己添加过的标签。

6、Collection Suggestions(收藏建议):Pivot 会建议您收藏一些内容到这里。通过和左侧的过滤器配合，将会产生很强大的搜索效果。IT168上有一篇介绍Pivot的文章,链接奉上：《全接触!微软最新浏览器Pivot的七个细节》其中详细介绍了关于过滤器与收藏集的使用。

7、站点选项卡（tab）、在5和6中间排列的是已打开网页的缩略图，类似于现在浏览器常见的tab选项卡，这个东西的好处就不再说了，不过对于pivot这个以预览展现的方式，除了opera自带（需自己调整）和火狐插件（需鼠标移上显示）之外，pivot这个方式显得更方便些。紧挨着这个的右边有一个加好和一个缩略图按钮，点加好可以增加新的tab,点缩略图按钮会把当前所有的tab以缩略图方式显示在浏览器窗口。

好了，对于pivot浏览器的体验就说到这里了，大家如果有对这个产品有兴趣并且系统配置能达到官方所标注的需求，那么不妨安装体验一下，因为它的体验还得您试过才知道，我这里只能用两个字代替——很酷。您可以

去Microsoft live labs了解更多关于Pivot的信息：http://getpivot.com/

还可以点击这里下载Pivot最新版本：http://content.getpivot.com/resources/Pivot.en-us.msi

如果您没有邀请码，可以留言给我，并留下您的联系方式，我这里有30个邀请名额，送完为止。

本文欢迎转载，转载请注明出处，谢谢！

相关日志

• “IETester”微软官方产品SuperPreview之感慨篇
• IE9 Platform Preview——IE9预览版本
• 体验篇：Microsoft Expression Web 3 SuperPreview全攻略
• 网页测试工具分享
• 第六期web标准化交流会心得