13
2013
ZZ 解决在IE下label中IMG图片无法选中radio的几个方法
方法一，JS：
window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
} } } } } }
方法二，CSS：
在图片上覆盖一个容器，容器本身透明显示
<input type="radio" name="radio" id="a" /> <label for="a"><img src="xxx.jpg" /><span></span></label>
将其中SPAN的属性设定有底色并且透明，SPAN覆盖到IMG上，并保持和图片同样的尺寸。
display:block; width:100px; height:100px; background:url(xxx.png) no-repeat 0 0; position:absolute; left:0; top:0;
方法三，THML代码控制：
在IMG中加一个属性，disabled 即可。
三种方法都是可行的解决方案，从实用方面，当然是第三种方法最简单，操作和实施起来最快，兼容性也好。问题是，以上仅仅是这种情况下的解决方法，如果从经验方面，三种方法都有自己的优势。
作者为 
24
2012
ZZ 您还在为XP系统下的微软雅黑烦脑吗？
转自HTML5集中营
由于公司网站的字体是用的「微软雅黑」，使用Windows XP的用户看到的页面字体颜色淡淡的，辨识度不是很好，于是我百度寻找解决方案，在百度得到的答案是”因为Windows XP 默认没有开启Clear Type，所以不支持字体渲染才会造成页面字体不太适合阅读，会觉得淡淡的颜色不够深，看起来不是很友好，辨识度还比宋体差很多。如下图:
难道我们要让用户手动去开启Clear Type,我想这也太不现实了吧！为了解决这个问题，我苦恼了很久，相信这也是很多前端工程师和设计师们一直纠结而痛苦的问题，就这样放弃其实又感觉蛮可惜的，因为「微软雅黑」字型漂亮，浏览网页看比宋体的网页要舒服很多，也会漂亮很多，心情也会愉悦起来。即然前端工程师和设计师都很喜欢微软雅黑,那么我们应该如何解决呢？直到我偶然发现了点点网，浏览完整个博客感触很深，因为他们的前端做得很细腻，细节处理惩罚得很好，于是我拜读一下点点网的代码。 （更多…）
23
2011
ZZ 高性能WEB开发 页面呈现、重绘、回流。
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
页面呈现流程
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 (<html> tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构，里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。
2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。
3、 dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局(layout)，会占有空间。根据css2的标准，render tree中的每个节点都称为box(Box dimensions)，box所有属性：width,height,margin,padding,left,top,border等。
4. 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。 （更多…）
14
2011
ZZ 自适应浏览器窗口的页面背景
最近在做的一个项目中，客户要求网页的背景不管客户浏览器大小多大， 背景都要铺满全屏。在网上找了一下，有人已经研究出来了方法，不用js就可以做到。下面看代码：
CSS代码：
02 body {/*为页面body添加一些基本信息*/
03 font-family:Arial, Helvetica, sans-serif;
04 font-size:14px;
05 color:#FFFFFF;
06 background:#DDDAD9;
07 }
08 #wrap{position:absolute;width:100%; height:100%;top:0; left:0; overflow:auto;overflow–x: hidden; z-index:2;}
09 #background {position:absolute; z-index:-1; width:100%; height:100%;}
10 .container{width:960px;margin:0 auto;}
HTML结构代码：
02 <div class=“container”>
03 <div id=“header”>
04 这里是header
05 </div>
06 <div id=“content”>
07 这里是Main content
08 </div>
09 <div id=“footer”>
10 这里是footer
11 </div>
12 </div>
13 </div>
14 <img src=“bg.jpg” id=“background” alt=“” />
解释一下上面的css和html，这个其实就是将html和body的滚动条取消，用div#wrap容器来模拟页面的滚动条。其实并不是用图片做背景的，是将background的图片z-index设置为-1；使它放在wrap页面的底部，这样既覆盖了body的背景色和背景图（如果有），又使内容区域的最上面。
这样看起来没啥问题了，挺好。
但是，但是客户的要求是千变万化的，客户说：如果我的img的src地址出错了，怎么办，这样把，我再在body里面增加一个bg吧。然后css就变成了这样：
2 font-family:Arial, Helvetica, sans-serif;
3 font-size:14px;
4 color:#FFFFFF;
5 background:#DDDAD9 url(images/bg.png) no-repeat center top;
6 }
但是，但是客户看了之后说：这个背景图要随着内容变化，也变化，不能让它固定在浏览器窗口上面。于是，再搜索信息，再修改：
在网上找到了一个外国佬写的一个Jquery插件Full Size Background Image jQuery Plugin
他做的一个demo： Full Size Background Image jQuery Plugin DEMO
具体使用方法：
CSS代码：
02 body {/*为页面body添加一些基本信息*/
03 font-family:Arial, Helvetica, sans-serif;
04 font-size:14px;
05 height:100%;
06 line-height:1.5;
07 color:#FFFFFF;
08 #background {
09 position: fixed;
10 top: 0;
11 left: 0;
12 overflow: hidden;
13 width: 100%;
14 height: auto;
15 z-index: -1;
16 overflow: hidden;
17 }
18 #wrap{position:absolute;width:100%;height:100%;top:0; left:0; z-index:2;}
19 .container{width:960px;margin:0 auto;}
HTML代码：
02 <div class=“container”>
03 <div id=“header”>
04 这里是header
05 </div>
06 <div id=“content”>
07 这里是Main content
08 </div>
09 <div id=“footer”>
10 这里是footer
11 </div>
12 </div>
13 </div>
14 <img src=“bg.jpg” id=“background” alt=“” />
但是他这个插件有一个问题，当页面内容高度超过一个屏幕的高度，在ie6浏览器下会出现问题，背景图片只出现在了当前页面的当前窗口，当拉动页面右边的滚动条的时候，下面就没有背景了。请分别在ie6和其它浏览器里浏览：
并且当添加的图片背景不存在的时候，ie6浏览器页面底部会出现一大块空白，查看下面没有背景的demo, 请分别在ie6和其它浏览器里浏览：
点此查看demo
于是又对页面css进行修改：
2 #wrap{position:absolute;width:100%;height:100%;top:0;left:0;_overflow:auto;_overflow–x:hidden; z-index:2;}
添加了上面的代码之后，解决了上面的问题，当页面内容高度超过一个屏幕的高度的时候，ie6下面不会再出现问题，请看demo：
但是由于在ie6下面这是用wrap模拟的滚动条，所以在ie6页面下，当#background标签没有图片的时候，body背景图会固定在窗口里不变。请看demo：
总结：
文章前两个demo没有用js，纯css写的，唯一不足之处就是：当页面#background没有图片的时候，拉动右边滚动条，body的背景是不变的。
文章后面四个demo用了js，不足之处就是：ie6浏览器会出现一些问题，当然如果不考虑ie6的话，就可以这里的4个demo中的任意一个了。
其实这里我们考虑的body的背景问题，如果不考虑body的背景问题的话，我们完全可以用纯css的那个demo。
如果你有什么好的意见和建议，欢迎在下面的评论处与我交流。
转自：冰剑’s blog
12
2011
ZZ符合标准的表单设计
下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间看了一下之前写的一些表单结构和语法，发现好多都不符合WEB标准，于是就想写一下关于表单标准的设计思路。
- 使用fieldset和legend标签
在form中，我们经常会对form中的信息进行分组，比如注册form，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在form中加入下面两个标签：
fieldset：对表单进行分组，一个表单可以有多个fieldset
legend：说明每组的内容描述
例如：
<form id=”demoform” class=”democss” action=””>
<fieldset>
<legend>Basic Register</legend>
<p>First name: <input type=”text” name=”fname” value=”” /></p>
…
</fieldset>
<fieldset>
<legend>Detailed Register</legend>
<p>Interest: <input type=”text” name=”interest” value=”” /></p>
…
</fieldset>
…
</form>
fieldset默认是带边框的，而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。
解决方法：在css中将fieldset的border设置为0，legend的display设置为none即可。 （更多…）
11
2011
ZZ CSS布局命名规则
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到的一些命名规则，当然，这些命名并不是绝对的，只是园子认为有个良好的命名习惯无论是对网站后期维护还是团队协作方面都会有很大的帮助。
网站一般布局命名
- 页头:header
- 登录条:loginBar
- 标志:logo
- 侧栏:sideBar
- 广告:banner
- 导航:nav
- 子导航:subNav
- 菜单:menu
- 子菜单:subMenu
- 搜索:search
- 滚动:scroll
- 页面主体:main
- 内容:content
- 指南:guild
- 服务:service
- 热点:hot
- 新闻:news
- 下载:download
- 注册:regsiter
- 状态:status
- 标签页:tab
- 文章列表:list
- 提示信息:msg
- 小技巧:tips
- 栏目标题:title
- 加入:joinus
- 按钮:btn
- 投票:vote
- 合作伙伴:partner
- 友情链接:friendLink
- 页脚:footer
- 版权:copyRight （更多…）