仅在 Safari Mac OS 中定位固定 CSS答案

【问题标题】：Position Fixed CSS in Safari Mac OS only仅在 Safari Mac OS 中定位固定 CSS
【发布时间】：2013-04-08 07:04:08
【问题描述】：

我目前在网站上遇到了一个固定 div 标头的问题，该问题仅在 Mac OS 的 Safari 中出现。

本质上，有一个 div 的 css 属性为“位置：固定”，但是当在 Safari Mac OS 中滚动时（仅）标题的某些部分保持固定，而另一些则没有。有趣的是，当 javascript/jQuery 插件导致刷新时，固定的标头会迅速回到应有的位置。

网址是 http://www.v2.ledcentral.com.au/。

任何建议将不胜感激。

【问题讨论】：

该页面在 Safari 5.1 和 Chrome 27 中对我来说是一样的。
我自己没有mac，我要到明天才能测试它。但我已经在不同的机器上测试过它，它从来没有工作过。我想知道您是否在我应用了 Santz 的修复程序后检查过它（如下）。

标签： css safari

【解决方案1】：

我已经看到 position:fixed 经常导致一些跨浏览器问题。我发现一个更好的方法是制作标题，然后在它下面有一个 div，它本身是可滚动的（它们不会滚动标题下的东西）。

|---Browser Viewport----|
| |-------------------| ^
| | Title Bar Content | |
| | fixed position    | |
| | can change v-size | |
| |-------------------| |
|                       |
| Main Content          |
| which                 |
| runs                  |
| off                   |
| the                   |
| screen below          v
|-----------------------|

或

|---Browser Viewport----|
|                       |
|  Title Bar Content    |
|  fixed position       |
|  but can change size  |
| |-------------------| |
| |Main Content       ^ |
| |which              | |
| |runs               | |
| |out of             | |
| |this div, below    v                  
| |-------------------| |
|-----------------------|

我希望这能解释我在说什么

【讨论】：

【解决方案2】：

当我遇到这种问题时，我会用这个 CSS 包裹整个“元素/s”：

.wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

这段代码 sn-p 长期以来一直是我的救世主......

运气，希望对你有帮助

【讨论】：

桑茨，它奏效了。在未来的项目中，我一定会牢记这一点。