Слайд-шоу jQuery в Chrome, Firefox и Safari

Question

В настоящее время у меня есть небольшое слайд-шоу на моей веб-странице, которая работает на jQuery.

Когда я тестирую свою веб-страницу в Firefox, слайд-шоу выстраивается именно там, где я хочу.Однако в Safari и Chrome слайд-шоу смещено примерно на 15 пикселей.

Изображения извлекаются в моем HTML через обычный неупорядоченный список.Как показано ниже:

<div class="slideshow">
     <ul>
         <li><img src="Images/slideshow/1.png" alt="LXA 1" /></li>
         <li><img src="Images/slideshow/2.png" alt="LXA 2" /></li>
         <li><img src="Images/slideshow/3.png" alt="LXA 3" /></li>
         <li><img src="Images/slideshow/4.png" alt="LXA 4" /></li>
         <li><img src="Images/slideshow/5.png" alt="LXA 5" /></li>
     </ul>
</div>

CSS для класса слайд-шоу:

.slideshow-div{
    width:1040px;
    padding-left:325px;
    padding-top:0px;
    height:287px;   
    background-image: url('../Images/slideshow-background.jpg');
    background-repeat: no-repeat;
}

И, конечно, когда я скачал плагин jQuery, у меня был отдельный CSS-файл, чтобы идти с ним.Но я не буду здесь это включать.

Я знаю, что в разных браузерах все по-разному.Но это мой первый раз, когда мне приходилось с ним работать.Поэтому я не уверен, как защититься от этого.

Answer 1

Вы проверили с «Firebug», что вызывает смещение?Я знаю, что некоторые браузеры дают ul s margin-left, в то время как другие дают им padding-left - возможно, вы забыли сбросить оба?

Answer 2

Вы можете создать класс css, который идеально позиционирует элементы в конкретном браузере, который в настоящее время доставляет вам неприятности.Затем определите, какой браузер используется, и вызовите класс css, соответствующий этому браузеру.

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

Answer 3

Если все изображения в слайд-шоу DIV «слайды», это означает, что функция jquery работает правильно. Таким образом, настоящая проблема не в вашем скрипте jQuery, а в файле CSS. Вы предоставили информацию о CSS только для элемента slideshow-div. Вы не должны оставлять UL и LI без стиля.

Это очень хорошая практика, чтобы сбросить CSS перед созданием вашего сайта. Вы можете следовать инструкциям здесь http://meyerweb.com/eric/tools/css/reset/. Сброс вашего CSS изменит ваш текущий вид, поэтому потребуется исправление.