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

标签 css scroll retina

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

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

http://jsfiddle.net/3by6ohq0/

position:fixed

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

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

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

最佳答案

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

right:7px;

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

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

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

关于css - Macbook 视网膜 CSS : scrollable div scrollbar overlapped by parent scrollbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27327550/

相关文章:

HTML 和 CSS 在 Retina 2800x2000 上显示错误

html - CSS 如何使 div 100% 尽管 80% div

javascript - 如何区分手动滚动(通过鼠标滚轮/滚动条)与 Javascript/jQuery 滚动?

javascript - 使用 CSS 按恒定量翻译元素以获得更流畅的动画?

javascript - 自动向下移动可滚动的div

html - 如果侧边菜单的高度超过窗口,如何固定?

google-maps-markers - 在静态谷歌地图 URL 中使用 "@2x"

ios - @2x 图像的低分辨率

html - 如何保持元素绝对在他们的位置 bootstrap 3

html - Bootstrap 列对齐问题