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

Question

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

Таким образом, сценарий представляет собой слайдер под названием EasySlider. Он прекрасно работает, чтобы отображать контент в режиме слайдов. Тем не менее, сценарий помещает строчную высоту на целевой элемент, который ведет себя странно в Chrome. Но, честно говоря, я не уверен, почему и где встроенная высота определяется в любом случае.

Таким образом, высота #slider определяется как 265px в моей таблице стилей. Но в Chrome скрипт ставит строчную высоту 21px, а в Firefox он отображает с линейной высотой 271px (ровно 21px больше, чем моя определенная высота).

Любые советы по этому вопросу? Вот страница в вопросе, элементы, являющиеся ползунок для каждого Род размещения: 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

Look в 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 к элементу уровня блока, ему может не понадобиться фиксированная высота.

удачи. [again ;-)]