我们常遇到输入框、下拉框、按钮等表单元素在同一行的情况,其它浏览器基本没啥问题,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>