Div использует цвет фона тела в IE 7

Question

У меня есть контейнер div с большим количеством элементов div для эффекта слайд-шоу. Div "контейнер" находится над фоновым изображением тела.

CSS для тела:

body { background: #333 url(images/bg.jpg) repeat-x top; }

Проблема в IE7: у контейнера есть цвет фона # 333. Firefox отображается правильно, как ясно.

Вот CSS для контейнера div:

.cntdiv {
    width:100%;
    display:block;
    margin:0 auto;
    margin-top:15px;
    overflow:hidden;

    }

Есть идеи, почему он выбирает цвет тела, а не изображение? Опять же, это работает прямо в Firefox.

Answer 1

IE7 действительно поддерживает URL для фона.Вы правильно сказали, что он не поддерживает URL-адреса данных, но это не URL-адрес данных.URL-адрес данных CSS выглядит примерно так:

url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) . 

Обратите внимание на использование ключевого слова «data:».Ключевым моментом здесь является то, что данные - это строка, а не файл.

Однако есть несколько небольших зацепок.Во-первых, URL-адрес должен быть в кавычках, например:

body { background: #333 url("images/bg.jpg") repeat-x top; }

IE, однако, интерпретирует короткий синтаксис background по-разному, поэтому я обнаружил, что расширение синтаксиса очень помогает в IE до 8 ошибок.

body { background-color: #333; background-image:url("images/bg.jpg"); 
       background:repeat-x; background-position:top;
}

Наконец, ваш контейнерный div должен быть явно определен с цветом фона:

.cntdiv {
    width:100%;
    display:block;
    margin:0 auto;
    margin-top:15px;
    overflow:hidden;
/* This is the line that will do it */
    background:transparent;
/* OR EVEN */
    background-color:transparent;
}

Этот код проверен и работает правильно в IE7 и имеет то же поведение в другихтакже.Разумное использование «прозрачного» - это здорово.

Также следует понимать, что проблема, с которой вы сталкиваетесь, это не ошибка, а стиль агента пользователя.Это соответствует стандартам W3C в отличие от других ошибок div, которые есть в IE (например, слабая поддержка :hover).Поскольку вы не определили фон для своего div, агент пользователя (IE7) может делать все, что ему нравится.Это верно для всех элементов HTML и всех браузеров.Вот почему кнопки выглядят определенным образом, если вы не измените их с помощью CSS.Явное определение каждого аспекта - лучший способ преодолеть такие мелочи, как эти.

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

Answer 2

Причина, по которой он не работает в IE7, заключается в том, что вы используете URL-адрес данных, а IE7 не поддерживает их.Об этом свидетельствуют:

http://www.caniuse.com/#search=Data%20url

Для IE7 вам придется использовать условные комментарии и настроить способ ссылки на фоновое изображение.Вот краткое и простое введение в условные комментарии, если вы еще не знаете о них:

http://css -tricks.com / 132-how-to-create-an-ie-only-таблица стилей /

Answer 3

Хорошо, я нашел проблему.Я использовал плагин jquery.cycle, чтобы вращать div в поле зрения.Каким-то образом IE7 это не понравилось.Я попробовал другой плагин jquery, и он отлично работает.

Спасибо за ваши предложения.