CSS 溢出检测脚本

按我的理解，CSS Bug 包含：

1. 兼容性 Bug
2. 内容 Bug (即运营填入内容或数据库读取内容后出现的 Bug)

其中兼容性 Bug 通常在开发阶段就能解决，而内容 Bug 通常被我们忽略。比如忘记对文字设置 overflow: hidden；比如忘记对图片设置宽高；等。不知大家是否也有类似经历?

所以，为自动化这块的测试工作，我写了个 简单的脚本 ，功能有二：

1. 文本内容 * 2
2. 图片替换为大图

我们先拿淘宝首页开刀，看看效果。。(还是有一些可以改善的地方的)

使用很简单，在地址栏运行以下脚本即可，或者把他们加入 BookMarklet 随时运行。

1. 文本＋图片

javascript:(function(){var f=[],h=document;(function(n){var p=arguments.callee,l=n.childNodes,m=0,k=l.length;for(;m<k;m++){var o=l[m];if(o.nodeType===1){p(o)}else{if(o.nodeType===3){f.push(o)}}}})(h.body);for(var d=0;d<f.length;d++){var b=f[d],j=b.nodeValue.replace(/^\s+|\s+$/g,""),c=h.createTextNode(j);if(j!==""&&j.length!==1){b.parentNode.insertBefore(c,b)}}var g=document.images,a=0,e=g.length;for(;a<e;a++){g[a].src="http://www.yoobao.com/shoppic/2010410425118938.jpg"}})(); 

2. 只文本

javascript:(function(){var list=[],doc=document;(function(parent){var func=arguments.callee,nodes=parent.childNodes,i=0,len=nodes.length;for(;i<len;i++){var node=nodes[i];if(node.nodeType===1){func(node);}else if(node.nodeType===3){list.push(node);}}})(doc.body);for(var i=0;i<list.length;i++){var node=list[i],value=node.nodeValue.replace(/^\s+|\s+$/g,''),tmpNode=doc.createTextNode(value);if(value!==''&&value.length!==1){node.parentNode.insertBefore(tmpNode,node);}}})(); 

3. 只图片

javascript:(function(){var images=document.images,n=0,len=images.length;for(;n<len;n++){images[n].src='http://www.yoobao.com/shoppic/2010410425118938.jpg';}})(); 

最后，友情提示下：
此工具不可滥用，并非所有地方都要考虑溢出的扩展性。