html - jQuery IMG Slider - 幻影边距

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 slider ，基本代码分解如上所示。我遇到了很多不同的问题，但其中有一个特别令人困惑。每张照片之间似乎有部分像素空间(我相信是 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;。

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