IE9 CSS中心定位
IE9 CSS中心定位
提问于 2012-12-04 21:02:19
请参考jsfiddle示例。
我正在尝试呈现一个弹出消息，它应该出现在屏幕的中心。
问题: IE9在左手边渲染，IE8在中间正确渲染，Chrome和火狐也很乐意在中间显示。
元素的CSS代码(.cPUParent)：
.cPUParent {
position: absolute;
bottom: 20px;
left: 5px;
right: 0;
width: auto;
max-width: 187px;
height: auto;
padding: 5px 10px 0 15px;
border: 2px solid #571C54;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
background-color: rgb(109,49,107);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* opacity in IE 8 */
filter: alpha(opacity=0); /* opacity in IE 5-7 */
opacity: 0;
z-index: 0;
}回答 2
Stack Overflow用户
发布于 2012-12-04 21:55:57
将.cPUParent类中的'max-width‘改为'width’，这样它就可以在IE9中工作了：
http://jsfiddle.net/rLwvP/
.cPUParent {
width: 187px;
}Stack Overflow用户
发布于 2012-12-04 21:57:51
你需要考虑的是物体的高度和宽度。如果你能设置一个固定的宽度，那就很容易了。以下是适用于ie8和9的解决方案。
.cPUParent {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
width: 100px;
height: 100px;
margin-left: -64.5px;
margin-top: -54.5px;
padding: 5px 10px 0 15px;
border: 2px solid #571C54;
border-radius: 5px;
background-color: #6D316B;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 999;
}解释:如果你可以设置高度和宽度(在这个例子中是100px)，那么你需要从屏幕边框的左边和顶部推入50%。
top: 50%;
left: 50%;当你这样做时，它会将长方体的左上角设置在50%/50%的点上，所以你需要把它往上拉，再向左一点(长方体的高度和宽度的一半)。(在解决此问题时，请考虑盒子模型。填充和边框都会增加对象的宽度和高度)
margin-left: -64.5px;
margin-top: -54.5px;底部和右侧的值应该重置为auto，以防有其他级联样式应用于它
right: auto;
bottom: auto;代码的其余部分是您的原始样式：
padding: 5px 10px 0 15px;
border: 2px solid #571C54;
border-radius: 5px;
background-color: #6D316B;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 999;别忘了，你现在看不到任何东西，因为你的不透明度设置为0(零)。
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;这应该就行了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13703594
复制相关文章
相似问题
腾讯云开发者
