Почему в хроме элементы li сваливаются под друг друга, а в Firefox нет?

Question

[Андрей]

Делаю бегущую строку с картинками на этом сайте. В Firefox, Opera и даже IE проплывают все 22 картинки,



а в Chrome видно всего 5, остальные почему-то стоят не в ряд за теми что видно, а проваливаются вниз на новую строку.



Если у элементов .tickercontainer и .mask убрать свойство height, то в первых 3 браузеров ничего не меняется, а в хроме видно, что блок выглядит вот так



Чую, что все можно решить парой css-свойств, но уже два часа не могу найти в чем проблема.

Answer 1

[GreatRash]

Вместо float: left; сделать display: inline-block;, а для ul написать white-space: nowrap;

Comments

[Андрей]

То что нужно, спасибо.

Но есть еще одна загвоздка. Длина бегущей строки вычисляется суммированием всех длин элементов li. У каждого из li есть margin в 50 пикселей справа. Суммирование происходит так:

$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).outerWidth(true);
});

Если я добавлю в цикл строчку

$("body").append(jQuery(this, i).outerWidth(true) + " ");

то в Firefox видно
193 196 200 141 200 200 200 200 166 200 189 168 195 129 135 200 200 200 193 200 179 196
(где 193 это 143 - длина картинки + 50 отступ справа)

а в хроме
50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50

То есть хром не считает длины картинок. Как его можно заставить это делать?

[Андрей]

Разобрался. Баг почему-то появляется если нажать на F5, если просто зайти на страничку, то все работает нормально. Странно.
Извиняюсь за лишнее беспокойство :)

[GreatRash]

Если считаются именно размеры картинок, то возможно в Хроме они просто не успевают загрузится (если вы скрипт на событие ready запускаете). Попробуйте на load запустить.