css - 立场:在 Safari 中绝对表现不同

Question

我正在构建一个响应式网站 ( http://dev.searsdavies.co.uk/quadrant-new/ )

对于纵向平板电脑，如果布局需要一组按钮位于屏幕的正中心，则该布局会在屏幕宽度为 768 像素时触发，并保持在低至 414 像素的位置。这些按钮的position:absolute位于所有其他内容的顶部，因为它们需要在网站的较大和较小版本上对齐到底部。

这些框在 Chrome 和 Firefox 中表现完美，但 safari 将它们放置在页面太高的位置。

上面是完整站点，这里是相关的 CSS

.row.footer {
    bottom: 49%;
    transform: translate(0, 50%);
    position: absolute;
    padding: 0 50px;
}

.row.full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

还有一个条件查询，可以阻止布局在横向手机和类似设备上变得太浅:

@media screen and (max-height: 800px) and (max-width:768px) and (min-width:415px) {

        .row.footer {
            top:352px ;
            bottom:auto ;
            transform:none
        }
    }

.side-img {
        height: 50vh;
        min-height: 400px;
        background-size: cover;
        position: relative;
    }
    .main-content {
        height: 50vh;
        min-height: 400px;
    }

Answer 1

这里有一些事情。

首先，prefix your properties ;您正在使用transform，但您没有添加前缀；它们无法在 Safari 中工作。

webkit-transform: 翻译(x,x);

其次，您的 @media 查询中包含此内容 - max-height: 800px。这意味着当浏览器高度**小于** 800px 时执行此操作 - demo 。

这真的是您想要针对纵向平板电脑(example 的 iPad，具有是768 宽度乘1024 高度)？

要解决您的问题:

1) 为您的转换添加前缀

2) 修复您的@media 规则

3) 删除 bottom: auto 规则

4) 删除/调整bottom: 49% 规则