关于ie6对齐
先来没有任何对齐时的样子：
1、一种是在父级没有高度的情况下居中。
给每个独立的元素都加上vertical-align:middle;
针对文字可以不加，加与不加都可以居中对齐。但是无法做到绝对的居中对齐。可以忽略此处了。
2、在父级有高度的情况下居中。
在高级浏览器中默认给父级来个line-height=父级已知高度，即可。
在ie6无效。
在ie6中：
现象一：（有文字混排的情况下）
解决办法：给每个元素都变成BFC，让其居中对齐即可。这里包括文字。
例：vertical-align: middle; display: inline; zoom:1;
现象二：（没有文字混排的情况下）在ie6用现象一的方法不能达到居中。
解决方法：选定一个清楚知道高度的元素，margin:/* (父级所属line-height - 自身img,input,select,object高度)/2px 0 */;
所有元素都vertical-align: middle;
在有文字混排的情况下用现象二的方法也可以解决现象一的bug。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6对齐测试</title> </head> <body> <div style="height:40px; padding:40px;"> <style type="text/css"> *{padding:0; margin:0;} .testLn2{/*line-height: 60px; height:60px;*/ background: red; margin-bottom: 20px; height: 60px; line-height: 60px;} /*.testLn2 span{vertical-align: middle;}*/ .testLn2 .me{display: inline; zoom:1; height: 40px; vertical-align: middle; margin:10px 0; } .testLn2 .me2{ vertical-align: middle; /*display: inline; zoom:1;*/} .testLn2 .me7{ vertical-align: middle; display: inline; zoom:1;} .testLn2 .me8{display: inline; zoom:1; height: 40px; vertical-align: middle;} .testLn2 .me6{display: inline; zoom:1; height: 30px; vertical-align: middle; margin:15px 0; } .testLn3{background: red; margin-bottom: 20px; height: 60px; line-height: 60px; } .testLn4{background: red; margin-bottom: 20px; height: 60px;} </style> <div class="testLn3"> <span>请输入验证码：</span> <input type="text" class="me" style="width:80px;" /> <input type="button" class="me2" value="gwgeg" /> <select class="me2"><option>gsdgdsgsg</option></select> <input type="radio" class="me2" /><input type="checkbox" class="me2" /> </div> <div class="testLn4"> <span class="me7">请输入验证码：</span> <input type="text" class="me" style="width:80px;" /> <input type="button" class="me7" value="gwgeg" /> <select class="me7"><option>gsdgdsgsg</option></select> <input type="radio" class="me7" /><input type="checkbox" class="me2" /> </div> <div class="testLn2"> <span class="me7">请输入验证码：</span> <input type="text" class="me8" style="width:80px;" /> <input type="button" class="me7" value="gwgeg" /> <select class="me7"><option>gsdgdsgsg</option></select> <input type="radio" class="me7" /><input type="checkbox" class="me2" /> </div> <div class="testLn2"> <!-- <span class="me7">请输入验证码：</span> --> <input type="text" class="me8" style="width:80px;" /> <input type="button" class="me7" value="gwgeg" /> <select class="me7"><option>gsdgdsgsg</option></select> <input type="radio" class="me7" /><input type="checkbox" class="me2" /> </div> <div class="testLn2"> <span>请输入验证码：</span> <input type="text" class="me" style="width:80px;" /> <input type="button" class="me2 me6" value="gwgeg" /> <select class="me2"><option>gsdgdsgsg</option></select> <input type="radio" class="me2" /><input type="checkbox" class="me2" /> </div> <div class="testLn2"> <!-- <span>请输入验证码：</span> --> <input type="button" class="me2" value="gwgeg" /> <input type="text" class="me2" style="width:80px;" /> <input type="button" class="me2 me6" value="gwgeg" /> <select class="me2"><option>gsdgdsgsg</option></select> <input type="radio" class="me2" /><input type="checkbox" class="me2" /> </div> <div class="testLn2"> <span class="me2">请输入验证码：</span> <input type="text" class="me2" style="width:80px;" /> <input type="button" class="me2 me6" value="gwgeg" /> <select class="me2"><option>gsdgdsgsg</option></select> <input type="radio" class="me2" /><input type="checkbox" class="me2" /> </div> </div> </body> </html>
参考地址：http://www.aiubug.com/?p=491
各种能考虑到的现象都在例子中，以后实际项目可以根据此例子实际应对。
修改了下已有的项目，附上ie6下的效果图：
ps：想说的很多，实际写的很少，慢慢沉淀吧。就酱紫。
