Question

我有一个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>

Answer 1

查看第65行附近的easySlider.js。

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

然后几行：

obj.height(h);

看起来像easySlider在初始化时检查li元素的高度，然后设置自身的高度（包装div）以匹配。问题是你的LI元素包含easySlider初始化时尚未加载的图像。因此，li只有一个行（文本）高（在这种情况下，是21px）。

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

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

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

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

奇怪的内联风格来自哪里？

1 个答案: