表单元素input等在IE下错位不能对齐问题——解决方案

本文链接：https://blog.csdn.net/liona_koukou/article/details/79710547

我们常遇到输入框、下拉框、按钮等表单元素在同一行的情况，其它浏览器基本没啥问题，IE下却经常出现错位问题。

如下图：

这是测试发给我的bug截图，当初IE下错位我特意加了top：10px\0;来对IE做兼容。我自己的环境是IE11，模拟IE10；测试的环境是IE10，结果问题出现了，我这里因为做了兼容没有错位测试反而出现错位问题。

这种情况下，我觉得最好的方法就是换一种方式让这些元素同行显示决定不再用display:inline-block;

查看了张鑫旭大神的博客找到了display:table-cell完美解决同行显示错位问题

这是博客地址：http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

解决方法就是给这几个表单元素的父元素添加display:table-cell;vertical-align:middle;（父元素加vertical-align:middle是为了让子元素在父元素内部垂直居中）然后给这些表单元素加vertical-align:middle;测试：IE8+和普通浏览器下没有错位问题

===============================================================

以下按我个人整理了张大神这篇博客留作对display:table-cell;各项用法的理解记忆，有兴趣可以直接复制在页面打开（需要用自己的图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-cell</title>
    <style>
        *{margin:0;padding:0;}
        .box{width:100%;height:300px;border:1px solid red;position:relative;}
        .table_cell{display:table-cell;width:200px;height:200px;border:1px solid green;}

        .img_box{display:table-cell; width:100%; height:400px; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}
        .img_box img{vertical-align:middle;}

        .img_content{border:1px solid greenyellow}
        .img_content img{float:left;margin-right:20px;}
        .img_content .content{display:table-cell;  width:2000px; *width:auto; *zoom:1;}

        .list_row{display:table-row;}
        .list_cell{display:table-cell; width:30%; padding:1.6%; background-color:pink;}
        /*中间一个元素背景淡蓝，有别于两边的淡灰色*/
        .list_center{background-color:lightgreen;}
    </style>
</head>
<body>
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。<br>
我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等。<br>
设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱一个td标签元素了<br>
接下来我们可以做一下效果看看<br>
<div class="box">
    <div class="table_cell">这是table-cell的内容,你可以自己尝试给.table-cell设置margin值padding值还有浮动固定定位等查看效果</div>
</div>
一、display:table-cell与大小不固定元素的垂直居中
<div class="img_box">
    <img src="img/zygl.png"/>
    <img src="img/circle_blue.png"/>
    <img src="img/qxgl.png"/>
</div>
从效果来看很好的完成了垂直水平居中，在IE下也没问题（IE8+）
二、display:table-cell与两栏自适应布局
<div class="img_content">
    <img src="img/logo.png"/>
    <div class="content">
        生活需要一些格格不入。<br>
        放肆一点，有趣一点吧，<br>
        就算不合时宜，也要活的足够性感。<br>
        “世界四通八达，确很少抵达某个真实的人”<br>
        那就从现在开始吧！你好，我是郑爽 !<br>
        ——《郑爽的书》<br>
        梦想因什么而存在<br>
        是用心做一件事的满足<br>
        还是很久以前许诺的约定<br>
        ——《郑爽的书》<br>
    </div>
</div>
三、display:table-cell下的等高布局
table表格中的单元格最大的特点之一就是同一列表元素都等高。用这一特性我们可以用table-cell做等高布局
<div class="list_row">
    <div class="list_cell">
        生活需要一些格格不入。<br>
        放肆一点，有趣一点吧，<br>
        就算不合时宜，也要活的足够性感。<br>
        “世界四通八达，确很少抵达某个真实的人”<br>
        那就从现在开始吧！你好，我是郑爽 !<br>
        ——《郑爽的书》<br>
        梦想因什么而存在<br>
        是用心做一件事的满足<br>
        还是很久以前许诺的约定<br>
        ——《郑爽的书》<br>
    </div>
    <div class="list_cell list_center">
        生活需要一些格格不入。<br>
        放肆一点，有趣一点吧，<br>
        就算不合时宜，也要活的足够性感。<br>
        “世界四通八达，确很少抵达某个真实的人”<br>
        那就从现在开始吧！你好，我是郑爽 !<br>
        ——《郑爽的书》
    </div>
    <div class="list_cell">
        生活需要一些格格不入。<br>
        放肆一点，有趣一点吧，<br>
        就算不合时宜，也要活的足够性感。<br>
        “世界四通八达，确很少抵达某个真实的人”<br>
        那就从现在开始吧！你好，我是郑爽 !<br>
        ——《郑爽的书》<br>
        梦想因什么而存在<br>
        是用心做一件事的满足<br>
        还是很久以前许诺的约定<br>
        ——《郑爽的书》<br>
    </div>
</div>

</body>
</html>