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

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

因此，脚本是一个名为EasySlider的滑块。它可以很好地以幻灯片形式显示特色内容。但是，脚本会将内联高度放在目标元素上，这在Chrome中表现得很奇怪。但是说实话，我不确定为什么要在任何地方定义行内高度。

因此，在我的样式表中，#slider的高度定义为265px。但是在Chrome浏览器中，脚本的内嵌高度为21px，而在Firefox中，脚本的内嵌高度为271px（比我定义的高度高21px）。

关于这个有什么提示吗？这是相关页面，元素是每个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>

最佳答案

查看easySlider.js，第65行。

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

然后几行：

obj.height(h);

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

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

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

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

祝好运。 [再次;-)]