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

Question

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

因此脚本是一个名为 EasySlider 的 slider 。它非常适合以幻灯片方式显示特色内容。然而，脚本在目标元素上放置了一个行内高度，这在 Chrome 中表现得很奇怪。但老实说，我不确定为什么或从哪里定义行内高度。

因此，#slider 的高度在我的样式表中定义为 265px。但在 Chrome 中，脚本将内联高度设置为 21px，而在 Firefox 中，它呈现的内联高度为 271px(比我定义的高度高 21px)。

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

标记通常是这样的，脚本将其变成动画 slider 并生成导航按钮:

<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 初始化时尚未加载的图像。因此，li 只有一行(文本)高(在本例中为 21 像素)。

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

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

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

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