2

我有一个在 div 内运行的滚动条脚本，看起来不错。我被要求在滚动条下方添加一个轨迹条，该轨迹条的样式与脚本附带的轨迹条不同。他们希望滚动条看起来像是在轨道内滑动，所以这就是做这些额外事情的原因。

重点是不使用图像，我设计了一个 CSS3 样式的轨迹栏，并将其放在滚动条所在的右侧和下方。我把所有的东西都排好了，但我一辈子都看不到主 div 的蓝色背景颜色和轨迹栏 div 之间的小空间来自哪里。为什么蓝色和轨迹栏之间有一条白色的条纹？

这是一个小提琴，或者这是测试页（它是右上角的蓝色）。

我觉得它一定就在我的鼻子底下。但是我一直在把它烧死，虽然我可以让段落、链接和标题在栏下方延伸（向自己证明我可以在轨迹栏下方找到东西），但我无法让蓝色进入下方. 我很肯定它与双浮点数有关：正确设置，但我认为我可以用位置 z-index 覆盖它。只有我做不到。

我完全愿意被告知“你做错了”。我愿意重新调整我的整个方法。

轨迹栏的 CSS（减去渐变的东西）：

.trackbar {
    width: 17px;
    height: 277px;
    float: right;
    margin-right: -20px;
    z-index: 20;
}

蓝色 div 的 CSS

.whatsnew {
    background-color: #DEE9F3;
    border-bottom: 1px solid #7E99CE;
    border-top: 1px solid #7E99CE;
    float: right;
    height: 276px;
    margin: 0 20px 0 0;
    padding: 0;
    position: relative;
    width: 290px;
    z-index: 10;
}
4

2 回答 2

2

神秘的白色鸿沟

您让 Trackbar 在比 trackbar 本身大 3px 的区域中向右浮动。如果 trackbar 需要为 17px，则将外部容器的 20px 边距和对应的 trackbar 边距 -20px 分别减小到 17px 和 -17px。

父div是310px，左边的div只有290px，但是你的trackbar只有17px（而不是剩下的20px）。

替代解决方案

另一种解决方案是为父 div 提供背景颜色，以便蓝色也位于轨迹栏的后面。

调试 CSS/定位

调试此类问题的一种便捷方法是使用 Chrome 的调试器。按F12Chrome 并选择左下角的小放大镜图标。您可以将鼠标移到页面上的空白处，看看是什么创建了该空间。

您还可以查看Elements选项卡右侧的Computed Style部分，以准确了解 DOM 节点对每个属性具有哪些值以及导致/影响这些属性的原因。

Firebug 有一个 Inspect 函数，它的行为应该类似。

于 2013-05-20T21:03:30.170 回答
0

好的，我在Corion 和Kevin B的帮助下得到了它。

两者都是正确的，将 -20 像素的边距降低到 -17 像素。

然后我不得不从那里开始，将蓝色框 (.whatsnew) 上的边距降低到 17。现在白色条子消失了。如果没有这两个人帮助我看到 17px 的东西，我就无法做到这一点。

谢谢！

于 2013-05-20T21:39:46.323 回答