Как остановить плавающее правое изображение внутри кровотечения в Google Chrome

Question

У меня есть несколько картинок, и я использую плагин цикла jQuery , чтобы показать их в слайд-шоу, которое всплывает прямо во внешнем div. Я использую этот CSS для правильного изображения:

.slideshow
{
    float:right;
    margin-left: 20px;
}

Это прекрасно работает в Firefox и Internet Explorer , так как оно всплывает справа внутри зеленого внешнего div (как показано здесь:):

Но в Google Chrome он не сохраняет изображение во внешнем элементе div и выплывает за пределы экрана (как показано здесь:)

Что действительно странно, если я продолжаю перезагружать вкладку в Chrome, она иногда работает и согласуется с Firefox / Internet Explorer, но часто это не так и выглядит как выше (для меня это загадка).

Какие-либо предложения о том, как получить Google Chrome, чтобы это соответствовало?

Answer 1

У меня есть решение. Ваш div слайд-шоу имеет предопределенную ширину и высоту, установленную на 22px. Просто измените эти значения на height = 332px и width = 532px. IE и Firefox делают это в фоновом режиме, а Chrome отображает это неправильно.

Answer 2

Ваш JavaScript установит размер .slideshow 22 пикселя x 22 пикселя. Теги <img> будут позицией: абсолютный; -ed.

Таким образом, Chrome использует только 22 пикселя x 22 пикселя div для макета.

Можете ли вы указать размер при вызове JavaScript?

В Firefox размер установлен правильно с помощью JavaScript. Так что, возможно, это ошибка в вашем скрипте слайд-шоу.

В качестве исправления вы можете поместить еще один <div> вокруг того, на котором вы вызываете скрипт слайд-шоу, и придать ему определенный размер. Сценарий не вмешается в это, и поэтому должен решить вашу проблему.

Answer 3

Браузеры

WebKit (Safari и Chrome) могут преждевременно инициировать событие $(document).ready, в этом случае до загрузки изображений.Вам необходимо указать значение высоты и ширины для каждого из ваших изображений, чтобы браузер мог рассчитать поток страниц до загрузки изображений.

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

Answer 4

Не видя код, я могу только догадываться: как правило, с плавающей точкой, вам нужно добавить DIV с атрибутом «clear: both» впоследствии (но все еще внутри одного контейнера), чтобы контейнер учитывал оба размера.