Блог

Главная - Вопросы по программированию - Проблема с Internet Explorer css. (Скрытое заполнение)

Проблема с Internet Explorer css. (Скрытое заполнение)

#javascript #jquery #html #css #doctype

#javascript #jquery #HTML #css #doctype

Вопрос:

Я создал небольшой слайдер, используя jQuery UI, и он фантастически работает в Firefox, именно так, как и должен. Однако в IE, похоже, между объектами помещается заполнение. Взгляните, и вы увидите:

http://www.grant [удалить это]unwin.co.uk/slider/slider1.html

Я понимаю, что у разных браузеров поля страницы и отступы устанавливаются автоматически, поэтому я попытался использовать:

 * {
    padding: 0px;
    margin: 0px;
}

Но проблема сохраняется.

Вопрос:

как я могу устранить пробелы между изображениями на моем слайдере (в IE)?

Ответ №1:

Ваша страница отображается в режиме Quirks, потому что вы не используете doctype (.. это вызовет стандартный режим).

Ваша первая строка в настоящее время такая:

 <html>

Добавьте doctype в самую первую строку, например, doctype HTML5:

 <!DOCTYPE html>

Это будет волшебным образом исправлено.

Ответ №2:

Пожалуйста, добавьте допустимый Doctype, потому что ваш веб-сайт просматривается в режиме Quirks в IE.

 <!DOCTYPE html>
<html> .... </html>

Дополнительно
Удалите float для img самого элемента и установите display: block; 

 .scroller_item {
    float: left;
    height: 238px;
    width: 192px;
}

.scroller_item .image {
    display: block;
    height: 238px;
    width: 192px;
}

Комментарии:

1. Вам не нужна первая (теперь вторая) часть вашего ответа 😉

2. @thirtydot: Это правда, хотя встроенные изображения известны тем, что оставляют пробел в 3 пикселя (обычно внизу), поэтому display: block исправляет это.

Ответ №3:

Я предлагаю использовать сброс, чтобы вернуть все стили к нулю во всех браузерах. Использование этого должно решить вашу проблему. Сброс Эрика Мейера

Ответ №4:

Попробуйте добавить:

 *
{
  padding: 0px;
  margin: 0px;
  border: none;
}

#sliding_section
{
  overflow: auto;
}

Вам придется настроить * свойства, так как это плохо скажется на рабочем сайте, но может сработать.

Ответ №5:

Попробуйте удалить «float: left» в вашем определении «.scroller_item .image» в вашем классе CSS.