Смещение со многими встроенными блоками li Теги - PullRequest
Новая
       45

Смещение со многими встроенными блоками li Теги

2 голосов
/ 19 ноября 2011

У меня странная, прерывистая, невоспроизводимая проблема с макетом CSS.У меня есть куча тегов li с элементами div внутри. Не всегда, но время от времени , когда я загружаю страницу в Chrome или Safari, макет смещен:

Редактировать: сайт теперь находится по адресу: www.socwall.com , если вы хотите попробовать воспроизвести.IE и Firefox, похоже, не имеют проблемы, только Safari и Chrome

enter image description here

Если я покачиваю мышью или перемещаю полосу прокрутки, она внезапно исправляется:

enter image description here

Я знаю, что inline-block довольно сложно использовать - как вы думаете, это так?

Ответы [ 5 ]

3 голосов
/ 24 ноября 2011

Возможно, макет страницы определяется до окончания загрузки изображений.Помогает ли включение высоты и ширины в теги изображения решить проблему?

2 голосов
/ 01 декабря 2011

Как указано в моем комментарии, просто добавьте это правило в таблицу стилей CSS: 

.wallpaperList img {
     width:290px;
     height: 260px;
}

И удалите все встроенные стили = "..." из самих изображений

Надеюсь, это поможет

2 голосов
/ 30 ноября 2011

Отлично работает на Safari и Chrome на моем конце (Mac).

2 голосов
/ 28 ноября 2011

Я тестировал несколько раз и никаких проблем вообще. Должно быть, это был какой-то старый CSS, который был кеширован вашим браузером.

Попробуйте перезагрузить весь браузер или удалить кэш и попробуйте снова.

1 голос
/ 01 декабря 2011

В качестве альтернативного решения, позволяющего избежать встроенного блока, вместо этого вы можете использовать float: left. Если вас беспокоит центрирование, вы можете:

  1. Заранее определите максимальное количество элементов в строке, и каждая строка будет содержать содержащий div, и используйте трюк с плавающими центрами здесь: http://www.cssplay.co.uk/menus/centered.html
  2. Для вашей полной ширины страницы загрузите содержимое с помощью jQuery на основе ширины окна. При изменении размера окна вы перезапустите загрузку Отсюда вы можете выяснить, сколько элементов может поместиться в каждой строке на основе ширины каждого элемента и размера окна.

Я знаю, что в отличие от inline-block это выглядит как много, но таков путь к совершенству:)

...