Странные встроенные стили откуда?

Question

У меня есть скрипт , который сегодня вызывает у меня довольно большую проблему . :-) Сценарий, очевидно, размещает встроенные стили на целевом элементе, но я не могу найти, где они определены.

Итак, скрипт представляет собой слайдер 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

Посмотрите в easySlider.js, вокруг строки 65.

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

, а затем через несколько строк:

obj.height(h); 

выглядит так, как easySlider проверяет высоту элементов liвремя его инициализации, а затем устанавливает высоту самого себя (div обертки), чтобы соответствовать.Проблема состоит в том, что ваши элементы LI содержат изображения, которые еще не загружены во время инициализации easySlider.Следовательно, li s имеют высоту всего одну строку (текста) (в данном случае это 21px).

Простое решение - добавить высоту к вашим изображениям (илик элементам li, в которых живут эти изображения).Если вы добавите высоту к элементам li, вам нужно убедиться, что они position:block, чтобы высота вступила в силу.- здесь было бы намного проще просто добавить высоту к элементу img.

Более сложное (но более общее) решение состоит в том, чтобы jquery следил за загрузкой изображений, а неинициализируйте easySlider до тех пор, пока изображения не будут загружены.

Другой подход заключается в удалении строки, в которой easySlider устанавливает свою собственную высоту.Это может решить проблему в вашем случае, так как вы всегда применяете easySlider к элементу уровня блока, ему может не потребоваться фиксированная высота.

удачи.[снова ;-)]