小编Ale*_*ith的帖子

我有一个div是我的"弹出窗口",我正在动画显示在其父div的直接中心.因此,我使用绝对定位,负边距和左+顶部来定位它,以便我可以-webkit-transform: translateY(-100%)在悬停时简单地为其设置动画.适用于Safari和Mobile Safari.

如果您在Chrome或Firefox中使用像素,它可以正常工作,即使您使用所有百分比,但使用它将起作用的像素设置父div宽度.但是,如果你使用所有百分比FF + Chrome似乎完全上下铺,并根据我无法弄清楚的东西渲染百分比.

小提琴示例:在Safari和FF/Chrome中查看此内容,以查看Safari呈现#pixels的内容与原样相同,#percents并且应在两者中呈现.是Safari正在渲染这个错误吗？

<div class="container">
    <div class="pretendImage"></div>
    <div id="percents"></div>
</div>

和我的CSS:

#percents {
    width:100%;
    height:100%;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50% 0 0 -50%;
}
.container {
    position:relative;
    width:50%;
    height:auto;
}
.pretendImage {
    width:200px;
    height:200px;
}

好吧,我通过添加一个额外的包装器找到了一种解决方法.我仍然想知道是什么原因引起的.

我的解决方法:小提琴使用包装器避免必须计算使用80%宽度/高度的内部div的顶部+边距.