Macbook视网膜CSS:可滚动的div滚动条与父滚动条重叠

时间:2014-12-06 02:09:03

标签: css scroll retina

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

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

http://jsfiddle.net/3by6ohq0/

position:fixed

有没有人有任何想法?提前谢谢。

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

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

1 个答案:

答案 0 :(得分:0)

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

right:7px;

希望将其从滚动条中删除。但是,对于您的不幸,滚动条在每个操作系统中的宽度都不尽相同。在Retina Macbooc Pro上,有更多的像素组成了滚动条的宽度(因此它对你的眼睛来说并不是很小),可能是你的2倍,因此7px右边不能证明更大的像素数。在我使用的Ubuntu上也没有。最好的方法是:

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

甚至绝对定位也会好于固定定位。因为现在因为父元素具有固定的位置,所以子元素实际上证明了它对于主体的位置或其父元素的父元素。