css - IE 和 Chrome 中的定位和居中表现不一致问题
本文介绍了css - IE 和 Chrome 中的定位和居中表现不一致问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
浏览器版本是IE 11和Chrome 50
html 代码
<div class="outer">
<div class="inner"></div>
</div>
CSS代码
.outer {
position: relative;
width: 400px;
height: 200px;
background: #f44336;
/* 在子元素有绝对定位的情况下,在IE中居中无效, Chrome中偏向中间,但是并不完全居中。 IE 11则完全向左*/
text-align: center;
}
.inner {
/* 去掉绝对定位,在IE 11 和Chrome中,inner居中正常*/
position: absolute;
display: inline-block;
width: 100px;
height: 100px;
background-color: #eee;
}
复制链接,分别在IE 和Chrome 中粘贴打开,你会发现表现不一样,
在
.inner
元素, 有绝对定位而且display
设定为inline-block
时,在IE中.outer
的text-align: center
无效,Chrome中也不会正常居中而是会偏一点,不知道为什么 ???去掉绝对定位就一切正常了
先行谢谢
解决方案
设置text-align:right;
设置text-align:left;
内联元素在有position情况下,text-align:right;会使元素与父元素右边对齐;
text-align:left;使元素与其左边对齐,text-align:center;与中间线对齐,所以并不会完全水平居中,至于ie不一样,那是ie犯浑的表现
这篇关于css - IE 和 Chrome 中的定位和居中表现不一致问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文