固定定位在Safari 7中不起作用(Fixed Positioning not working in Safari 7)

固定定位在Safari 7中不起作用(Fixed Positioning not working in Safari 7)

我在使用Safari 7（在OSX上）的网站上遇到了问题。 网站地址是： <编辑：地址不再有效。 对不起。>

如果单击垂直新闻稿按钮，则会在内容框的右边缘弹出一个叠加层。

这个叠加层在大多数浏览器上都很好看，但是safari存在问题。

叠加内容是一个绝对定位的固定宽度的盒子。 它包含一个带有类“bg”的div，它是一个将CSS位置设置为fixed并且CSS top，right，bottom left设置为0的div。

所需（通常获得的）效果是，此bg框的大小最大为视口的宽度和高度。 在safari中，它的行为就好像将它的位置设置为“绝对” - 它的大小只是容器div的宽度和高度。

这是Safari的已知问题吗？ 是否存在错误？ 更新？

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

I'm having a problem on a website with Safari 7 (on OSX). The website address is: <Edit: Address not valid anymore. Sorry.>

If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.

This overlay looks good on most browser, but there is a problem with safari.

The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.

The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.

Is this a known issue with Safari? Is there a bug filed? An update?

I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.

最满意答案

我不确定该定位的内容是什么，但这是我在浏览器中获得相同结果的方法：

#overlays .overlay { /* line 1081 */ ... width: 100%; height:100%; ... } #overlays .overlay .content.text { /* line 1185 */ ... margin:0 auto; ... }

I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:

#overlays .overlay { /* line 1081 */ ... width: 100%; height:100%; ... } #overlays .overlay .content.text { /* line 1185 */ ... margin:0 auto; ... }