先来没有任何对齐时的样子：

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

关于ie6对齐的更多相关文章

  1. 兼容ie6的ul水平居中对齐

    ---恢复内容开始--- margin可以为负数左移动. padding不可以. ---恢复内容结束---

  2. label和input里面文字不对齐的解决方法！

    测试了集中方法,发现不行.只能用专署标签解决这个问题. <fieldset>    <legend>神光咨询后台管理登录</legend>    <br /& ...

  3. 关于 IE6、 IE7兼容性总结（转）

    其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...

  4. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  5. 让ie6对png透明图片支持起来

    [声明:此文仅是对低版本ie使用透明图片的一个研究,当时出于工作要求,所以花费了一番心思在兼容旧版本ie上,现在对ie8都是做降级处理了.不培养用户坏习惯.引导用户跟随潮流体验新技术应是我们前端开发者 ...

  6. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  7. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  8. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  9. 小tips: 使用&#x3000;等空格实现最小成本中文对齐

    一.重见天日第二春 11年的时候,写了篇文章“web页面相关的一些常见可用字符介绍”,这篇文章里面藏了个好东西,就是使用一些空格实现个数不等的中文对齐或等宽.见下表: 字符以及HTML实体 描述以及说 ...

随机推荐

  1. [问题]C# 结构体对齐:如何将变长byte数组对齐

    [StructLayout(LayoutKind.Sequential,Pack=1)] struct Report_Read_Parameter { byte Confirmation; byte ...

  2. 1084: [SCOI2005]最大子矩阵 - BZOJ

    Description 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. Input 第一行为n,m,k(1≤n≤100,1≤m≤2 ...

  3. Eclipse maven工程 Missing artifact com.sun:tools:jar:1.5.0:system 解决方法

    今天同事在使用eclipse,引入一个新的maven工程时报错:      Missing artifact com.sun:tools:jar:1.6.0:system   这个问题很奇怪,相同的代 ...

  4. win8 任务栏不合并隐藏标题

    让win8任务栏不合并,并且隐藏标题的办法: 效果如下: 首先让win8不合并任务栏 1.任务栏上点鼠标右键 -- "属性" 2."任务栏按钮"选择" ...

  5. 在javascript中检查一个值是否为integer

    integer 类型在javascript中很奇怪.ECMAScript技术规格说明书中,它是以概念的形式存在.number类型包括浮点型(floating )和整形(integer )不包括小数(详 ...

  6. ios iap 购买总是提示继续的解决方案

    原地址:http://blog.csdn.net/kafeidev/article/details/8619984 ========================================== ...

  7. leetcode Largest Rectangle in Histogram 解法二

    上一篇文章讲了该题的一个解法.后来又发现一个更好的解法. 首先依旧考虑一个升序的数列,例如1,2,3,4,5.那么它的最大矩形显然是有5种可能,即 1*5,2*4,3*3,4*2,1*5.所以最大的矩 ...

  8. PHP 打印函数之 print print_r

    print 说明 int print ( string $arg ) 输出 arg print 实际上不是一个函数(它是一个语言结构),因此你可以不必使用圆括号来括起它的参数列表 参数 arg:输入数 ...

  9. 1051 Wooden Sticks

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  10. ubuntu 13.10 64bit装BeyondCompare

    1. Beyond Compare官网下载amd-64位的,安装失败,依赖于ia32-libs,但是这个文件已经不在源里了: 2. 官网下载tar.gz源码包,解压安装失败: 3. 直接装32位的,可 ...