zoukankan      html  css  js  c++  java
  • 关于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="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="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="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="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="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="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="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:想说的很多,实际写的很少,慢慢沉淀吧。就酱紫。

  • 相关阅读:
    未能加载文件或程序集“System.EnterpriseServices, Version=4.0.0.0或2.0.0.0
    解决本地调用office组件成功,但是发布到IIS中出现的错误(检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败)
    未能找到类型或命名空间名称“Coco”(是否缺少 using 指令或程序集引用)
    SQL截取字段字符串的方法
    C# 128位AES 加密解密 (转)
    检索 COM 类工厂中 CLSID 为 {13C28AD0-F195-4319-B7D7-A1BDAA329FB8} 的组件时失败,原因是出现以下错误: 80040154
    js 获取时间比较全,留备用(zhuan)
    windows之如何把iso文件转换为VHD文件
    python之三行代码发送邮件
    RobotFramework第二篇之web自动化
  • 原文地址:https://www.cnblogs.com/meimeiwa/p/ie6-bug.html
Copyright © 2011-2022 走看看