Macbook视网膜CSS：父滚动条重叠的可滚动div滚动条答案

【问题标题】：Macbook retina CSS: scrollable div scrollbar overlapped by parent scrollbarMacbook视网膜CSS：父滚动条重叠的可滚动div滚动条
【发布时间】：2014-12-06 02:09:03
【问题描述】：

发现了一个奇怪的问题，做了一些谷歌搜索，没有找到有类似问题的人。

简而言之。我在另一个位置固定的 div 中有一个位置固定的 div。在非视网膜上，一切都很好，但在 macbook 视网膜（webkit 浏览器）上，父级的滚动条与应该位于顶部的 div 的滚动条重叠：

http://jsfiddle.net/3by6ohq0/

position:fixed

有人有什么想法吗？提前致谢。

非视网膜与视网膜的视觉比较：

http://i.imgur.com/iTlRgmH.png

【问题讨论】：

标签： css scroll retina

【解决方案1】：

这背后的原因与您对像素的使用有关。现在，您已设置为“浮动”类的内部固定 div：

right:7px;

希望它脱离滚动条。然而，不幸的是，滚动条在每个操作系统中的宽度并不完全相同。在 Retina Macbooc Pro 上，有更多的像素构成了滚动条的宽度（所以它对你的眼睛来说并不是很小），可能是这个数量的 2 倍，因此 7px 右侧并不能证明更大的像素数量是合理的。在我使用的 Ubuntu 上也没有。最好的方法是：

.floating {
    position:relative;
    float:right;
}

甚至绝对定位也比固定好。因为现在由于父元素有一个固定的位置，子元素实际上是在向 body 或它的父元素的父元素证明它的位置。

【讨论】：

嗯，这是一种模态。换句话说，这个 div 是为了暂时在主要内容之上。我设置正确的原因：7px 用于演示目的。在我真正的样式表中，它是 0px。它应该与其父滚动条重叠，直到被解雇。希望这是有道理的。
请问为什么要在父元素上固定定位？一般来说，除非绝对必要，否则最好避免固定定位。它使事情变得草率和困难。
这是个好问题。我讨厌它是固定的，但我正在开发一个已经设计好的网络应用程序。我只是在增强一些东西。有很多我不满意的事情，但不幸的是，我必须接受我所得到的。