位置：在 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: translate(x,x);

其次，您在 @media 查询中有这个 - max-height: 800px。这意味着 do this stuff when the browser is **less than** 800px in height - demo。

真的你想对针对肖像平板电脑的@media规则说什么吗（iPad 对于 example，有 768 widthby 1024 height)?

解决您的问题：

1) 为您的 transforms

添加前缀

2) 修复您的 @media 规则

3) 删除 bottom: auto 规则

4) remove/adjust bottom: 49% 规则

位置：在 safari 中绝对表现不同

Position: absolute behaving differently in safari

html

css

safari

position

absolute