jQuery IMG 滑块 - 幻影边距

Question

<div class="pictures">
    <ul>
        <li>
            <img src="img1.jpg" />
        </li>
        <li>
            <img src="img2.jpg" />
        </li>
        <li>
            <img src="img3.jpg" />
        </li>
    </ul>
</div>

我正在构建一个 jQuery IMG 滑块，您在上面看到的基本代码分解。我有很多不同的问题，但有一个问题尤其令人困惑。每张照片之间似乎有部分像素空间（我相信是 1.5 像素）......不确定它是边距、填充、边框还是其他东西。我必须将照片 331.5px 向上或向下设置动画，以便它们正确地放置在容器 div 内。我的一般 reset.css 不起作用。默认情况下，我的边框、边距、边距宽度和填充都设置为 0。

这很奇怪。任何想法为什么会发生？或者我怎样才能消除它？

链接到实际页面：http://www.ficreates.com/_SiteDemos/PBL/projects.html

Answer 1

这里发生了几件事。

第一件事是body {line-height: 1;} 被你的ul 继承。摆脱它或覆盖它，例如ul {lineheight: 0;}，黑色间距消失了。

这样做不会对齐您的动画，因此您将不得不修复您的脚本。

我注意到的一件事是，您正在为img 标签的位置设置动画，而不是像ul 这样的容器元素。好奇你为什么这样做。通常只需在容器元素上执行 += 或 -= 即可。如果需要，您可以将ul 设置为display: block;。

希望这会有所帮助。如果您还有其他问题，请告诉我。也许稍后我可以得到一个完整的工作示例。