开发

这个用css hacks 判断浏览器大概是上个月写的，其中的hacks基本涵盖了大部分浏览器，本页面经过测试的浏览器：IE5.0、IE5.5、IE6、 IE7、IE8（beta1&beta2）、Opera 9.5, Firefox 3, Safari4、K-Meleon、Google Chrome。 其实用css判断浏览器是没有什么意义的，其主要意义就在于css hack在多浏览器下的使用，及如何用更少的css代码来实现各种主流浏览器的兼容。这个页面里的css hacks基本上囊括了ie系列（ie5.0-IE8）的csshack，同时也加入了不太常用的针对Opera和Safari的css hacks。

演示可以见：https://xhl.me/demo/html/browser_detector.html

在css hacks方面，我觉得最好不要用!important来提升指定样式的优先权，我不喜欢这它，因为如果使用它的话，你可能会发现写出的css代码相对较多。当然也不是完全不用它，目的只是当我们加入hacks时，是否要考虑一下如何才能使css的代码更精简？顺便也应该想到，当我们写XHTML代码时，是否考虑某处用div合适，还是ul合适，或者是dl合适？当我们写javascript的时候呢，是否也可以使用最少的代码来实现某一效果？有些人只是写出了div、css代码就很自豪的说自己已经会div、css了，当我问他浏览器兼容和HTML标签语义化时，他却说不出。其实有很多地方值得我们去研究，上次帮公司做的网页，css和js代码基本都被我压缩的不能再压缩了，先手工压缩再机器压缩，很爽很爽:)， 不过他们说我变态～。其实这样网站的效率才能达到最高。

我的做法就是在做网页时，应该以firefox来作为参照，然后再在ie和其他浏览器下测试，这样写出的css代码可能会是最少的。还有就是善用display:inline来解决ie下margin加倍，善用clear:both，有时也可以这样：<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->，给IE单独做一个css。因为之前做的是门户级的网站，写了很多页面，从中也学到了很多新知识，一时想不起来了，有时间再整理出来。还有只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。

 之前在这里：https://xhl.me//archives/534总结了一次，这次加上点。

var l=document.getElementById("left").scrollHeight;   
var r=document.getElementById("right").scrollHeight   
if (r>l) {   
    document.getElementById("left").style.height=document.getElementById("right").scrollHeight+"px";   
} else {   
    document.getElementById("right").style.height=document.getElementById("left").scrollHeight+"px";   
}

网上的div等高方法大致有五种(无非就是利用js或者css)，这个算是js方法一种的完善，无论left或是right高时，都可以实现自适应高度。而且就算遇到left或right里面有其他元素影响时，也可以通过在+"px"; 前面加上加减乘除来达到满意的效果，例,可写成：+5+"px"。

下面是三栏等高：

var l=document.getElementById("left").scrollHeight 
var m=document.getElementById("middle").scrollHeight 
var r=document.getElementById("right").scrollHeight 
layoutHeight=Math.max(l,m,r) 
document.getElementById("left").style.height=layoutHeight+"px" 
document.getElementById("right").style.height=layoutHeight+"px" 
document.getElementById("middle").style.height=layoutHeight+"px" 

看过很多比较有创意的404页面，自己早就想做一个了，这次终于做了一个出来。XHTML、CSS、PHP、FreeBSD都有了，自己感觉创意还不错。本来是想404页放个小游戏来着，后来还是发现自己喜欢这个。

https://xhl.me/demo/html/404.html

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)： [^\x00-\xff]
应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}
匹配空行的正则表达式： \n[\s| ]*\r
匹配HTML标记的正则表达式： /<(.*)>.*<\/>|<(.*) \/>/
匹配首尾空格的正则表达式： (^\s*)|(\s*$)
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
利用正则表达式分解和转换IP地址：
下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的javascript程序：
function IP2V(ip) {
re=/(\d )\.(\d )\.(\d )\.(\d )/g //匹配IP地址的正则表达式
if(re.test(ip)) {
return RegExp.*Math.pow(255,3)) RegExp.*Math.pow(255,2)) RegExp.*255 RegExp.*1
}
else {
throw new Error("Not a valid IP address!")
}
}
不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：
var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是：" (ip[0]*255*255*255 ip[1]*255*255 ip[2]*255 ip[3]*1))
匹配Email地址的正则表达式： \w ([- .]\w )*@\w ([-.]\w )*\.\w ([-.]\w )*
匹配网址URL的正则表达式： http://([\w-] \.) [\w-] (/[\w- ./?%&=]*)?
利用正则表达式去除字串中重复的字符的算法程序：
var s="abacabefgeeii"
var s1=s.replace(/(.).*/g,"")
var re=new RegExp("[" s1 "]","g")
var s2=s.replace(re,"")
alert(s1 s2) //结果为：abcefgi
用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1
s="http://www.9499.net/page1.htm"
s=s.replace(/(.*\/)([^\.] ).*/ig,"")
alert(s)
利用正则表达式限制网页表单里的文本框输入内容：
用正则表达式限制只能输入中文：
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"
用正则表达式限制只能输入全角字符：
onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"
用正则表达式限制只能输入数字：
onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
用正则表达式限制只能输入数字和英文：
onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"