目前的主流显示分辨率还是1024*768，绝大部分的设计都是在这个基础上考虑扩展的，想要兼容这一分辨率，就必须知道各种浏览器的区别，例如：IE的有滚动条就比较大，FF的比较小，闲着无聊，测试了一下市面上常用的浏览器。
图片里的数据代表的是浏览器内可视范围大小。
左边是无右边滚动条也没有底部滚动条的情况 右边是刚刚出现右边滚动条的情况
没什么技术含量记录一下，我看网络上的也不太全。
Posted in UE, Web Standard | No Comments »
已经三个星期了，几乎每天晚上公司的班车上都会有我疲惫的小身影，为了祖国的四化建设，咱是呕心沥血啊，哈哈。
最近用到利用a中的title进行鼠标hover后提示信息，这个是个简单的不得了的事情，但却灵异了，说它是bug，又无从说起，因为万恶的IE系列浏览器再一次牛逼哄哄起来。第一次遇到，当是学习了。
怎么回事呢？
Posted in UE, Web Standard | No Comments »
最近在写个前端与设计的交流PPT，其中有个地方测试了一下多种情况下盒模型的表现，其中有个小地方，关于margin叠加的一种情况，我是第一次发现，估计相对于其他前辈而言，不值一提，自己记录一下吧。
场景是这样的：外层div给他固定了高度和宽度（500px*500px），内层div（300px*300px）也一样但是高度和宽度比外层的小，为的是减少其他因素的影响，然后对内层div进行margin:10px。问题就在这里了，一直以来都晓得垂直空白边会叠加，但没想到这样也能叠加，并且ie系列（6，7）和firefox,opera等标准浏览器的表现不一样。
code:
margin
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
#wrapper{width:500px;height:500px;background:#DADADA;}
#inner{width:300px;height:300px;background:#050505;margin:10px;}
DEMO Here!!
看了demo后你会发现，#wrapper在firefox,opera等标准浏览器中上方出现空白填充，而#inner顶部是直接到了外层元素的边缘，与#wrapper的边缘重合了。而在Iie系列（6，7）下则是另一种情况，空白填充没有叠加，#wrapper是没有margin的。
也就是说，内外的元素即使任意一个垂直方向margin为零，另一个有垂直方向margin，依然会出现叠加。
Posted in Web Standard | 3 Comments »
前些天做一个横幅的banner广告，要求点击后能到链接所指向的地址，且能关闭。材料是图片，不是flash。吧唧吧唧，整出来了。。
---------1 beta 1-----------
test
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
img{border:none;}
#test{position:relative;}
#offDot{width:20px;height:20px;display:block;position:absolute;top:4px;left:268px;}
function offDot(){
document.getElementById("test").style.display = "none";
}
--------- beta 1-----------
DEMO beta1
这个时候，在FF下点击右上角的叉叉能关闭了。。但是在IE下点击#offDot（叉叉）却无法触发关闭事件。起先以为是无法获得布局，于是对他增加了*zoom:1;还是不行，又想，难道是z-index问题？ 随之设置了它和父元素或兄弟元素间的z-index，让#offDot的z-index高于#test或#bta。但是依然无效。。。
---------2 beta 2-----------
test
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
img{border:none;}
#test{position:relative;}
#bta{width:300px;height:50px;display:block;background:url(bt.gif) no-repeat;}
#offDot{width:20px;height:20px;display:block;position:absolute;top:4px;left:268px;}
function offDot(){
document.getElementById("test").style.display = "none";
}
--------- beta 2-----------
DEMO beta2
上面的这个beta 2通过将banner图片作为#test的背景后，问题解决了。百思不得其解。。。。。IE下a元素包含img后激活范围干扰了绝对定位在它之上的另外的a元素。。。
Posted in Web Standard | 8 Comments »
都知道，a标签通常就是利用href的属性来创建超文本链接，用来链接到互联网中的某个位置，就像网中的一个节点。Internet也因它而神奇。
除了它本身的作为超链接的源的应用外，还有什么扩展应用呢。
1.最简单的，<a href="xx.xx"><img src="xxx.jpg"/></a>，这种是最初的扩展，利用图像作为a的内容，而不仅仅是文字，这样就能使得链接看起来更直观，更醒目。
2.javascript ，有时候，为了在点击a标签时能够触发某些事件，你可以在<a >内写javascirpit，例如：< a href="#" onclick="alert("fafsfs");">xxx</a>。
3.还有一种，能够给浏览者更进一步的良好体验，就是让鼠标hover时，< a>能够变换视觉效果。
mail.163.com的做法：
利用了onmouseover和onmouseout事件将这个INPUT上的class进行切换，使得背景变换。
优点：对很多元素都可以使用这个方法。
缺点：要添加额外的脚本，如果浏览者禁用脚本，就不会起作用。
Posted in Web Standard | 1 Comment »