Question

例如，请参阅jsfiddle。

我正在尝试渲染一条应该出现在屏幕中央的弹出消息。

问题：IE9在左侧呈现，IE8在中心呈现正确，Chrome＆amp; Firefox也很高兴在中心展示。

元素的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;
}

Answer 1

在.cPUParent类中将'max-width'更改为'width'使其在IE9中有效：

http://jsfiddle.net/rLwvP/

.cPUParent {
  width: 187px;
}

Answer 2

您需要考虑的是物体的高度和宽度。如果你可以设置一个固定的宽度，那么它很容易。这是解决方案，它适用于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％推入50％。

        top: 50%;
        left: 50%;

当你这样做时，它会将盒子的左上角设置在50％/ 50％的点上，这样你就需要将它向上拉并稍微离开（盒子的高度和宽度的一半）。（在处理时考虑盒子模型。填充和边框都增加了对象的宽度和高度）

        margin-left: -64.5px;
        margin-top: -54.5px;

应将底部和右侧值重置为自动，只是应用了其他级联样式

        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（ZERO）。

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;

那应该这样做。

IE9 CSS中心定位

2 个答案: