固定定位在Safari 7中不起作用

我在使用Safari 7（在OSX上）的网站上遇到问题。
网站地址是：
<编辑：地址不再有效。抱歉。 >固定定位在Safari 7中不起作用

如果您点击垂直通讯按钮，在内容框的右边缘，会弹出一个覆盖图。

这个覆盖在大多数浏览器上看起来不错，但Safari浏览器存在问题。

叠加内容是固定宽度的绝对定位框。它包含一个带“bg”类的div，它是一个CSS位置设置为固定的CSS，CSS顶部，右侧，底部左侧设置为0.

期望的（通常获得的）效果是，这个BG框大小直到视口的宽度和高度。在safari中，它的行为就好像它的位置设置为“绝对” - 它只是将容器div的宽度和高度设置为大小。

这是Safari的一个已知问题吗？是否有提交的错误？更新？

我可以通过重写HTML，CSS和JavaScript的小部分来解决这个问题（如果有人有一个更简单的解决方案，欢迎分享它！），但我首先想了解发生了什么。

来源

2014-02-14 Rolf

我不知道发生了什么事与定位的东西，但这里是我的方法来获得不同的浏览器相同的结果：

#overlays .overlay { /* line 1081 */ 
    ... 
    width: 100%; 
    height:100%; 
    ... 
} 

#overlays .overlay .content.text { /* line 1185 */ 
    ... 
    margin:0 auto; 
    ... 
}

来源

2014-02-21 01:56:15

工作。不知道发生了什么，虽然... – Rolf

你可以使用Z-指数，但Z-指数不位置可靠：固定，如下图所示：http://jsfiddle.net/mZMkE/2/改为使用translateZ转换。

transform:translateZ(1px);

您的页面元素。

编辑：在您的代码，添加这个CSS：

.bla, .projects, .contact { 
     -webkit-transform:translateZ(1px); 
     -moz-transform:translateZ(1px); 
     -o-transform:translateZ(1px); 
     transform:translateZ(1px); 
}

，然后从这些元素和.intro删除的z-index裁判。

另外你也可以尝试在其他浏览器以及

来源

2014-02-22 17:25:45 Catmandu

我不认为这是一个堆积问题，而是一个箱子大小的问题。 – Rolf

固定定位在Safari 7中不起作用

回答

相关问题