0

例如，请参考jsfiddle。

我正在尝试呈现应出现在屏幕中央的弹出消息。

问题：IE9 在左侧呈现，IE8 在中间呈现正确，Chrome 和 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;
}
4

2 回答 2

1

将 .cPUParent 类中的 'max-width' 更改为 'width' 使其在 IE9 中工作：

http://jsfiddle.net/rLwvP/

.cPUParent {
  width: 187px;
}
于 2012-12-04T13:55:56.973 回答
1

您必须考虑的是对象的高度和宽度。如果你可以设置一个固定的宽度，那么它很容易。这是适用于 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（零）。

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

那应该这样做。

于 2012-12-04T13:57:51.343 回答