html - Safari CSS 兼容性问题

Question

因此，我正在编写一些支持所有浏览器的 CSS，并在 IE、Chrome、Opera、Safari 和 Firefox 上对其进行测试。以下 CSS 将 #signinForm 定位在所有浏览器(Safari 除外)的页面中心。

#signinForm {
    position: absolute;
    -webkit-position: absolute;
    width: 400px;
    height: 320px;
    left: calc(50% - 200px);
    top: calc(50% - 160px);
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-shadow: 0px 3px 3px -3px #ccc;
    display: block;
}

我必须在我的代码中添加什么才能让 CSS 将#signinForm 定位在 Safari 窗口的中心？

Answer 1

您可以使用:

#signinForm {
    position: absolute;
    width: 400px;
    height: 320px;
    left: 50%;
    margin-left: -400px; /*  minus the width of the div */
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-shadow: 0px 3px 3px -3px #ccc;
    display: block;
}