CSS 3 PIE：无法在绝对定位（弹出）元素内工作？鼠标悬停时移动？

发布于 2024-09-16 09:40:32 字数 879 浏览 5 评论 0原文

我正在使用 CSS 3 PIE include，这样我就可以在 IE 中的弹出窗口上有圆形边框。然而，在 IE 中，弹出窗口在页面加载时不是圆角的，但是当我将鼠标悬停在它上面时，它会移动到容器的左上角，该容器是绝对定位的，并且它有圆角边框。

这是 HTML：

    <div class="popupWrapper" id="editMsgWrapper">
        <div class="popupDiv" id="editMsgContainer">

这是相应的 CSS：

.popupWrapper {
    display:none;
    left:0;
    margin:0 auto;
    position:absolute;
    text-align:center;
    top:0;
    width:100%;
    z-index:601;
}

.popupDiv {
    text-align: left;
    position: relative;
    top: 100px;
    margin: 0 auto;
    width: 500px;
    border: none; /*1px solid #FFF;*/
    font-size: 12px;
    background: #FFF;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.php);
    position: relative;
}

知道为什么 popupDiv 在鼠标悬停时会转换为绝对 div 吗？

谢谢！

原文

I am using the CSS 3 PIE include so that I can have rounded borders on my popup in IE. However, in IE, the popup is not rounded on the pageload, but when I mouse over it, it shifts to the top-left corner of the container, which is positioned absolutely, and THERE it has rounded borders.

Here is the HTML:

    <div class="popupWrapper" id="editMsgWrapper">
        <div class="popupDiv" id="editMsgContainer">

And here is the corresponding CSS:

.popupWrapper {
    display:none;
    left:0;
    margin:0 auto;
    position:absolute;
    text-align:center;
    top:0;
    width:100%;
    z-index:601;
}

.popupDiv {
    text-align: left;
    position: relative;
    top: 100px;
    margin: 0 auto;
    width: 500px;
    border: none; /*1px solid #FFF;*/
    font-size: 12px;
    background: #FFF;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.php);
    position: relative;
}

Any idea as to why the popupDiv is shifting to the absolute div on a mouseover?

Thanks!

分享到QQ

分享到微博