关于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:想说的很多,实际写的很少,慢慢沉淀吧。就酱紫。

posted @ 2014-03-02 13:20  梅梅哇  阅读(654)  评论(2编辑  收藏  举报