<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，真的该早点走了！
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，那么最后的渲染效果也会是你的预期，这个是个很小的细节，开发中但是还是要注意下了。
2 Comments so far | Read On »
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！！！！！！！！！！！
5 Comments so far | Read On »
用canvas写了个简单的写字板
用canvas写了个超级简单的写字板 <html> <head> <title>Canvas tutorial</title> <style type=”text/css”> body {margin:0px;padding:0px;} canvas { border: 1px solid black; position:absolute;top:170px;left:300px;margin:0px;padding:0px;} </style> </head> <body> <canvas id=”tutorial” width=”300″ height=”300″></canvas> <script> function thumbnail(){ this.load = function(){ this.canvas = document.getElementById(‘tutorial’); if (this.canvas.getContext){ this.ctx = this.canvas.getContext(’2d’); } this.ispause=true;//是否暂停绘画，在鼠标按键松开的时候 this.c_p=getPosition(this.canvas); } } window.onload = function(){ window.thumb = new thumbnail(); thumb.load(); thumb.canvas.onmouseup=function(){ thumb.ispause=true; } thumb.canvas.onmousedown=function(event){ thumb.ispause=false; [...]
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下面void(0)之出离愤怒
昨天晚上回到家后还跑回公司处理了一个bug，是这样的，我一个按钮，鼠标移动上去，要现实一个浮层，而这个按钮又是可以点击执行相关ajax操作的。简单吧，我就载在这个简单的需求上面了，至于原因，总之我承认我在这个跌过一次的坑上面又跌了一跤，记的去年在139.com的网盘项目组的时候就处理过相关问题还有过< a href=’http://www.nickli.cn/?p=60‘>一篇博文记录</a>来时刻警醒自己，而我又在这个问题上摔跤了. 我偷了个懒，觉着直接用css做了个兼容的浮层很帅，然后，又有个要命的是，我在页面是用<base href>标签，这逼的我在a标签上面只能写<a href=”javascript:void(0)”>,因为如果用<a href=”#”>的话，页面还是会跳到base目录下面去，这很恶心（以后要尽量避免使用base标签了！！！！！！！），总之就是我偷了个懒引来了这个问题——a标签还有个onclick事件侦听，执行玩一个ajax后，在回调函数里面会弹出一个div浮层，而这个浮层上面的三个背景图片一个都不少的全部没出来，这个浮层被裸了！ 那么可能问题就真的出在这里，这里要感谢组里前端<a href=”http://blog.htmlwind.com/“>大师兄</a>帮忙一起耐心调试，我们抓包发现点击按钮后，直到浮层出来，没有发现三个图片的请求发出。那么可以肯定，我们确实没有看过，这个浮层被裸了是因为图片没有回来，而不是以为其他的css的问题，那么为什么会这样呢！ 而我是把onclick换成了onmousedown，这样却发现这个浮层能现实图片了，而偶尔的是会有一张显示不出来。 有位哥们遇到过类似的问题。说几个吃饱了没事干的老外反复试验，发现这是IE6 一个底层机制的bug，说是 <a href=”javascript:void(0)”>或者<a href=#”>这样使用a标签的话并不能阻止a标签最后触发一个什么行为，导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了 那么如果真的是这样，就好理解了，因为我的浮层是有个屏蔽层的，onmousedown后，焦点已经移动 到了屏蔽层上面，a标签的onclick侦听也不在执行，那么这个a标签最后出发的那个什么行为就不会触发了，于是我 的图片就可以正常的请求url了。这个只是我的这个特定的应用场景下面的一个巧合的解决办法。 这个bug一般会出现在这样的情况下面 a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样: 1. <a href=”javascript://” onclick=”dosomething()”>a1</a> 2. <a href=”javascript:void(0)” onclick=”dosomething()”>a2</a> 3. <a href=”###” onclick=”dosomething()”>a3</a> 第三种方法dosomething()中切换图片完全没有问题, 但是href=”###” 却带来了另一个问题, 占用了锚点,页面URL也不美观. 第1,2种方式虽然没有上面的问题, 但会引发IE6的奇怪bug, dosomething()中图片无法加载. 只要在dosomething();后面增加一个return false;就可以解决了. 如果是绑定事件, 同样在function最后增加return false;就行. 唉，希望如果也有碰到这样诡异问题的朋友能看了这里后能有所以收获。
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 [...]
No Comments so far | Read On »
好吧，得寻找前端战友了，qq宠物招聘
职位: 前端开发工程师 待遇: 面议 有效期至: 2009-02-31 工作地点: 深圳南山区 公司名称: 腾讯公司 简历投送邮箱: 252759102@qq.com nickli@tencent.com 学历: 大专以上 是否应届: 非应届 年龄要求: 23以上 性别要求: 不限 职位描述： 1. 负责QQ宠物产品的前端开发工作，与后台开发人员配合实现社区的交互。 2.参与产品的研究与规划 ； 3.负责产品前端方案的实施与优化； 职位要求： 1.大专以上学历； 2.2年以上前端开发经验；有大型Web项目开发经验者尤佳; 有从事过网页游戏开发经验者优先； 3. 精通HTML、CSS、JavaScript等前台相关技术,熟悉W3C网页标准,了解至少一种后台语言的开发机制(如php，Java等)； 4. 能熟练运用一种常见AJAX框架,如Jquery等，参与或者开发过某种JS框架者尤佳； 5.熟悉面向对象编程，对JS性能优化有一定了解。 6. 强烈欢迎敢于面对问题、善于解决问题，善于学习，善于沟通，人品好的同学； 补充说明： 本职位招聘2-3人，欢迎深圳及深圳周边的同学请快快加盟吧。 另外，有强烈的学习欲望，对新事务和新知识有明锐的触角和良好的学习能力，前端的技术日新月异，我们需要不断的一起学习一起努力一起讨论一起探索。 我们为您提供：自由开放的工作环境，团结友爱的团队，丰富多彩的业余活动（篮球协会，羽球协会，足球协会，台球协会，舞蹈协会等等），不定期的腐败活动，行业内有竞争力的薪酬等等。所有这一切只是为了让您感受，这不仅仅是一份工作，也可以做为您的事业，您的生活！ 如有不明事宜可联系QQ252759102或者致电 86013388-83583（9：30-17：30，周一到周五）
2 Comments so far | Read On »
用 HTML Canvas 创建一个图片浏览器
HTML 5 引入了新的的网页元素：Canvas 是一片空白的绘图区域，网页开发者可以利用 JavaScript 在该区域中自由地进行 2D 绘图。Canvas 可以用于渲染华丽的网页设计界面。本文通过一个详细的实例来说明如何用 Canvas 来制作一个图片的浏览器。最终的效果可以达到 Flash 程序的效果。通过本文，读者可以了解如何使用 Canvas 的各种函数以及如何与用户事件进行交互，适合读者为 Web 设计和架构师。
2 Comments so far | Read On »
