css - Macbook 视网膜 CSS : scrollable div scrollbar overlapped by parent scrollbar

Question

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

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

http://jsfiddle.net/3by6ohq0/

position:fixed

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

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

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

Answer 1

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

right:7px;

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

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

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