奇怪的内联样式来自哪里？

Question

我有一个script，这导致我今天遇到quite some 问题。 :-) 该脚本显然是在目标元素上放置内联样式，但我找不到它们的定义位置。

所以脚本是一个名为 EasySlider 的滑块。它可以很好地以幻灯片方式显示特色内容。但是，该脚本在目标元素上放置了一个内联高度，这在 Chrome 中的行为很奇怪。但老实说，我不确定为什么或从哪里定义内联高度。

所以#slider 的高度在我的样式表中定义为 265px。但在 Chrome 中，该脚本将内联高度设置为 21 像素，而在 Firefox 中，它以 271 像素的内联高度呈现（比我定义的高度正好多 21 像素）。

关于这个有什么建议吗？这是有问题的页面，元素是每个 Rod 发布的滑块：http://tuscaroratackle.com/rods/

标记一般是这样的，脚本把它变成一个动画滑块并生成导航按钮：

<div id="slider-1">
    <ul>
        <li><img src="/img/rod.jpg" /></li>
        <li><img src="/img/rod.jpg" /></li>
        <li><img src="/img/rod.jpg" /></li>
    <ul>
</div>

Answer 1

查看easySlider.js，大约第65行。

var h = $("li", obj).height();

几行之后：

obj.height(h); 

看起来easySlider 在初始化时检查li 元素的高度，然后设置自身的高度（包装器div）以匹配。问题是您的 LI 元素包含在 easySlider 初始化时尚未加载的图像。因此，lis 仅 一行（文本）高（在本例中为 21 像素）。

简单的解决方法是为您的图像（或这些图像所在的 li 元素）添加高度。如果为 li 元素添加高度，则必须确保它们是 position:block，以便高度生效。 -- 在这里为img 元素添加高度会容易得多。

更复杂（但更通用）的解决方案是让 jquery 监控图像的加载，并且在图像加载完成之前不要初始化 easySlider。

另一种方法是删除 easySlider 设置自身高度的行。这可能会解决您的问题，因为无论如何您总是将 easySlider 应用于块级元素，它可能不需要固定高度。

祝你好运。 [再次 ;-) ]