<div style=”width:700px;height:700px;background:#00CC99″> <div style=”background:#330066;width:500px;height:500px;”> <div style=”float:left;background:#FF3366;”> <div style=”width:300px;height:300px;”></div> <div style=”width:100%;height:100%;background:red;position:absolute;left:0;top:0;”></div> </div> </div> </div> 在非ie6的浏览器中都是满屏幕的红， 说明非ie6的浏览器的width和height的百分比，都是相对的上个相对定位或者决定定位的元素，没有就为html元素 而，ie6中的width和height 的百分比，相对的是上个有高宽显示设置的元素，而且height的百分比设置失效，所以上述代码在ie6中就出现宽度穿越了他的父元素而遇见width:500px;的元素的时候，边把自己设置成了width:500px;而height的设置则失效，，， 这个， 让人很蛋疼！ie6，真的该早点走了！
Category > css
ie内核和标准浏览器间对width:50%的差异解读
是这样的，一个大的盒子里面有两盒子，并成为子left和字right吧，两都是50%的float:left; <style> .c {width:887px;height:100px;background:blue;} .l ,.r{width:50%;float:left;height:50px;background:red;} </style> <div class=”c”> <div class=”l”></div> <div class=”r”></div> </div> 预设的效果是类似下面这样的 嗯，你用上面的代码测试下， 没错，在ff，chrome等标准浏览器下面都显示为预想的效果，但是，在ie内核的浏览器下面则出现了偏差，子left和子right出现了错行，没有显示在同一行内，如下 这个，是ie内核对50%的解释问题吧，887px的50%是多少，443.5px，在ie看来，基本单位是1px，0.5px在ie里面被补上了0.5px，于是left和right加起来总共多出了1px，于是超过了父887px的width于是被ie强制换行，如果父节点的width为偶数，比如666px，那么它的50%就是333px，那么最后的渲染效果也会是你的预期，这个是个很小的细节，开发中但是还是要注意下了。
ie6下面试用png使用滤镜需知
一个弹出框，圆角，带阴影，还半透明的阴影，那么，你肯定会想到用png了，是的，ie下，大家别无他法。 一般会这样来做 <div id=”box” style=”背景图片，if==ie6（加滤镜）”> <div id=”boxcenter” style=””>这里是弹出框的内容</div> </div> ok,一个漂亮的圆角阴影半透明的弹出框出来了，但是，在ie6下面，你会发现这个弹出框只可远观而不可亵玩， 你 里面的按钮啊什么的都无法捕捉到你的鼠标事件，杯具发生了。你在里面的按钮啊什么的都用不了。为什么？ 这个，真的很难说，归咎于ie6的私有滤镜了，但是，如果你的png图片，在boxcenter的位置 切空了，也就是 你的png是个只有边框的图片的话，那么加了滤镜后，的png透明处都是可以使用的。 切记一点，背景图片的png加了滤镜后，这个element内部只有在png的透明位置才能响应你的鼠标，其他地方 都被滤镜屏蔽掉了！！！！！ 万恶的ie6！！！！！！！！！！！
webkit浏览器下面的css top：50%问题
有这么个效果，CSS使DIV层绝对居中【水平和垂直】 我想这个很多的同学都知道这样做 #content{ position:absolute; width:650px; height:298px; left:50%; top:50%; margin-left:-325px; /*设置为宽度的一半*/ margin-top:-149px; /*设置为高度的一半*/ } IE6、IE7、Firefox全都正常显示,但是， 在chrome,safari 的webkit系浏览器下面是有问题的。 你可以试下，如果在body很高，比如2000px的情况下，你把滚动条拉到最下面，然后点击按钮来垂直居中显示这个层， 很遗憾，你发现什么都没有，而，当你把滚动条拉到最上面的时候，你会看到层这个时候垂直居中的显示在这里， 我想，这个时候大家应该知道webkit浏览器在解释top:50%的时候和其他的浏览器不同的地方了，也就是说webkit浏览器里面 ， 你要加上scollheight的高度，你的margin-top==scollheight-层的高度的一半。 而当position:fixed的时候，却有和其他浏览器里面的absolute的时候是一样的效果，回归统一了，fuck，真恶心
ie6下a标签的void(0)引发的诡异问题 带来的思考
1 <HTML> 2 <HEAD> 3 <TITLE>1.html </TITLE> 4 </HEAD> 5 6 <BODY> 7 <a href=”javascript:void(0)” onclick=”loadiframe()”>点我咯</a> 8 <script> 9 var loadiframe = function(){ 10 var myi=document.createElement(“iframe“); 11 myi.src=“2.html“; 12 document.body.appendChild(myi); 13 } 14 15 </script> 16 </BODY> 17 </HTML> 上面代码保存为1.html <HTML> 2 <HEAD> 3 <TITLE> 2.html </TITLE> 4 </HEAD> 5 6 <BODY> 7 这里是第2.html 8 [...]
Yahoo专家：怎样才能成为优秀的前端工程师
本文翻译自著名的前端工程师Nicolas Zakas的博客。Zakas目前是Yahoo!公司的首席前端工程师，Yahoo首页的负责人，也是YUI库的作者之一。当然，相信大家更熟悉他写的名著《JavaScript高级程序设计》（图灵出版）。
从我丢失了;号 之后说开来去
js一直以其松散而著称，然后，很多时候，然，童鞋们，不要误解松散的字面意思，松散但是其词法结构，而不是书写习惯，如果果真误解了，会将自己领入一个自己的松散编织的咒语。 上次写的那个jquery的屏蔽层的， 因为我用的 (function(){})(jquery) 方式 我后面想， 如果想再写个插件的话就要 (function(){})(jquery) (function(){})(jquery) 于是，我调试了下，轰， 脚本报错 了，，，，同时我改传window的作用域来 实验 (function(scope){})(window) (function(scope){})(window) 依然 “页面脚本错误” 斗大的报错信息郝然眼底 到这里，我犯了个不可饶恕的低级错误，也许这个错误同样的很多同学也会步这个后尘，细心的你发现了么，当然，也许你一眼就发现了我的问题出在哪里了，因为我这确实是犯的个低级错误！ js 是函数式的语言，在js中，（）具有二意性， 意一为表达式中的提高优先级别 比如 (a+b)*c 那该运算表达式优先计算a+b 意二 则为函数调用比如(function(){})() 上面的后面()即为匿名函数(function(){})的调用 如果上面的空匿名函数换成这样 (function(){ return function(){ alert(“自由是现实的，现实是操蛋的”) } })() 首先这个匿名方法返回一个function 如果在后面在加个() 比如这样 (function(){ return function(){ alert(“自由是现实的，现实是操蛋的”) } })() (function(){}) 后面在加一个()里面带一个匿名函数。 系统就会把这个()当成是前面返回的那个匿名函数的调用表达式，而里面的空function(){}则被当做参数提交了。 到这里，前面我不小心弄出来的那个 斗大的报错信息 恍然大悟。 我一直和自己说，注重细节，细节决定成败，然而却一直都忽略了这个问题，每一句表达式后一定要加;来断句，这是个良好习惯，只是一直以来都没有引发问题而已，这里，我不得不深刻反省，犯如此之低级错误，真应该做深刻的检讨，上cctv，上新闻联播，向全国人民道歉！ 谁动了我的分号
javascript操作符之new 也疯狂 （2）
JavaScript本是一种基于原形的（prototypal）语言，但它的“new”操作符看起来有点像经典语言。这迷惑了广大程序员们，并导致了很多使用上的问题。 在JavaScript中，不要用到new Object()这种操作，该用{ }来代替。同理，也不要用new Array()，相应的，用[]来代替。JavaScript的Array绝不同于Java的Array，模仿Java的语法只会使人越来越糊涂。 也不要用new Number，new String，或是new Boolean。在JavaScript使用包装对象完全没有必要，只需使用普通的声明就可以了。 不要用new Function来新建一个function，而应当用最普通的function表达式。例如： frames[0].onfocus = new Function(”document.bgColor=’antiquewhite’”) 更好的写法是： frames[0].onfocus = function () {document.bgColor = ‘antiquewhite’;}; 同样定义一个事件，第二句不会立即检测函数体，哪怕是函数体有错，也不会立即报错。只有不了解function内部机制的人才会用new Function这种声明方式。 selObj.onchange = new Function(”dynamicOptionListObjects[" dol.index "].change(this)”); 如 果我们直接写出函数体，编译器是无法看到其内部的（也就无法立即执行、无法立即引发错误）。但如果我们用表达式方式声明函数（如上），看不到函数内部的则 是我们。编程的话，还是尽量对一且都尽量清晰可见吧。以声明函数的方式来返回一个函数，我们可以更加明确地传值，如下代码，它还可以设定一个初始值。 selObj.onchange = function (i) { return function () { dynamicOptionListObjects.change(this); }; }(dol.index); 还有一个不好的习惯是将new放到function的前面，比如，new function对于构造新的对象来说，毫无意义。 myObj = new function () { this.type [...]
javascript操作符之new 也疯狂(new 好久不见)
在taobao ued 上看到一好文， 好久没见过这么爽朗的好文了。转了 JavaScript是一门基于原型的语言，但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言。那样也迷惑了程序员们，导致一些有问题的编程模式。 其实你永远不需要在JavaScript使用 new Object()。用字面量的形式{}去取代吧。 同理，不要使用 new Array() ，而代之以字面量[]。JavaScript中的数组并不象Java中的数组那样工作的，使用类似Java的语法只会让你糊涂。 同理不用使用 new Number, new String, 或者 new Boolean。这些的用法只会产生无用的类型封装对象。就直接使用简单的字面量吧。 不要使用 new Function 去创建函数对象。用函数表达式更好。比如： frames[0].onfocus = new Function(”document.bgColor=’antiquewhite’”) 更好的写法是： frames[0].onfocus = function () {document.bgColor = ‘antiquewhite’;}; 第二种形式让脚本编译器更快的看到函数主体，于是其中的语法错误也会更快被检测出来。有时候程序员使用 new Function 是因为他们没有理解内部函数是如何工作的。 selObj.onchange = new Function(”dynamicOptionListObjects["+ dol.index+"].change(this)”); 如 果我们让用字符串做函数体，编译器不能看到它们。如果我们用字符串表达式做函数体，我们同样也看不到它们。更好的方式就是不要盲目编程。通过制造一个返回 值为函数的函数调用，我们可以明确的按值传递我们想要绑定的值。这允许我们在循环中初始化一系列 selObj 对象。 selObj.onchange = function [...]
关于float ,文档流的 一些不经意的地方
标准下靠左浮动的块为什么不能位于父框架顶端<div id=”父框架”><div></div> <div></div> <div>现在只能和这个的顶部平齐</div> <div>这个要位于顶部</div></div> 引用: 贴出源码 <style> #con{border:1px solid #ccc;width:200px;overflow:hidden; zoom:1;} #con div{margin:10px;} .right{float:right;clear:right;border:1px solid #ccc;width:100px} .left{float:left;clear:left;border:1px solid #ccc;width:50px} </style> <div id=”con”> <div>right</div> <div>right</div> <div>right</div> <div>right</div> <div>left</div> <div>left</div> </div> 效果图： 《图一，标准浏览器下》 《图二，歪打正着的ie浏览器下》 一般这种情况下，IE 的表现都是错误的。虽然有可能看起来 IE 的表现是你所期望的。也就是说，歪打正着了，在几乎所有的标准浏览器下面的效果都是图一所示。而ie下面则是图二所指，虽然看着对齐了很舒服。 好了，问题出来了， 那么想办法怎么解决吧。 记的float，的元素是脱离了文档流的，那么，如果把左float left的style都 去掉float ？ 1 <style> 2 #con{border:1px solid #ccc;width:200px;overflow:hidden; zoom:1;} 3 #con div{margin:10px;} 4 .right{float:right;clear:right;border:1px solid #ccc;width:100px} 5 .left{clear:left;border:1px solid #ccc;width:50px} 6 [...]
