网站优化工具分析工具/怎样自己做网站
我们常遇到输入框、下拉框、按钮等表单元素在同一行的情况，其它浏览器基本没啥问题，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>