фон css не отображается в ie 6 при использовании правил, таких как # id.class - PullRequest
Новая
       13

фон css не отображается в ie 6 при использовании правил, таких как # id.class

1 голос
/ 07 августа 2009

Я делаю всплеск изображения div, который меняет фон с другим классом CSS, вот правила, которые я определил: 

#splash {
    height: 130px;
}

#splash.homepage { 
    background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll; 
}
#splash.projectspage { 
    background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll; 
}

это отлично работает в Firefox и Chrome, но фон как-то не отображается в ie 6. Странно то, что он работает для класса домашней страницы, но не для класса projectspage. То есть 6, кажется, интерпретирует эти почти идентичные правила по-разному. Я попытался очистить кеш, не помогло. я совсем новичок в css и то есть 6 хаков, так что мне здесь чего-то не хватает?

также другая проблема, которая немного связана с этим, кажется, что она не работает в Firefox, когда перед классом есть место, например, "#splash .homepage", но почему-то я вижу сайты других людей, использующие css с пробелом , в чем может быть проблема?

Обновление: я попытался изменить порядок # splash.homepage и # splash.projectspage, затем теперь работает projectspage, но не домашняя страница. Кажется, что все, что следует сразу за #splash, используется.

вот некоторые соответствующие css & htmls: 

#splash {
    height: 130px;
}

#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
    padding: 53px;
    height: 40px;
    width: 450px;
}

#splashtext h2 {
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: normal;
    font-style: italic;
}

#splashtext p {
    color: #FFFFAA;
    font-family: Calibri, Arial, san-serif;
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
    font-style: italic;
}


<!-- splash, this one does not show -->
<div id="splash" class="homepage">
    <div id="splashtext">
        <h2>some header</h2>
        <p>some description</p>
    </div>
</div>

<!-- splash, this one shows -->
<div id="splash" class="projectspage">
    <div id="splashtext">
        <h2>some other header</h2>
        <p>some other description</p>
    </div>
</div>

Ответы [ 8 ]

5 голосов
/ 07 августа 2009

IE6 не поддерживает несколько комбинированных селекторов для выбора элементов (# id.class или .class.class и т. Д.). IE6 распознает только последний класс / ID в вашей цепочке.

Подробности и пример

Однако в этом случае, если у вас есть только .homepage и .projectspage на одном элементе на странице, фоновое изображение должно отображаться на правильном элементе.

Я заметил, что вы, вероятно, используете .homepage и .projectspage, чтобы различать две страницы и один и тот же элемент на этих разных страницах. Хорошей практикой является помещение класса в элемент <body>, чтобы вы могли использовать его для различения каждой страницы и их потомков. 

<body class="homepage">
    <div id="splash">

Тогда ваш CSS будет: 

body.homepage div#splash { blah }

body.projectspage div#splash { blah }

Дополнительное преимущество: теперь вы можете настраивать таргетинг на любые элементы на странице, а не только на те, к которым вы добавляете ".homepage" или ".projectspage".

3 голосов
/ 07 августа 2009

Возможно, у вас проблема с файлами изображений .png.IE6 не может обрабатывать слой прозрачности, который является частью изображений .png, он просто отображает любой пиксель с прозрачным маркером как серый фон.

Что касается второй части вашего вопроса, #splash.background значительно отличаетсяПравило чем #splash .background.Первый (без пробела) относится к элементу с идентификатором splash, который также имеет background класс .Второе правило (с пробелом) относится к любому элементу класса background, который является дочерним элемента с идентификатором splash.Тонкое, но важное отличие.

0 голосов
/ 15 августа 2009

У меня такая же проблема, и это не PNG. например,

column2menu li {border-bottom: 1px solid;}

column2menu li.goats {цвет нижнего края: коричневый;}

... работает в IE6, но ...

td # menu {background-repeat: no-repeat; background-position: внизу справа;} td # menu.goats {background-image: URL (../ изображений / goats.jpg);} ... нет.

Но я нашел решение для ie6, которое до сих пор работает в FF, т.е. .tdgoats {background-repeat: no-repeat; background-position: справа внизу; background-image: url (../ images / goats.jpg);} ... так что вы используете: ... и ie6 счастлив

Эта запись выглядит хорошо, где я ее печатаю, но предварительный просмотр в синем поле немного странный. Каким-то образом строки 2 и 3 получили

'd

0 голосов
/ 07 августа 2009

(я полагаю, ваша страница проекта находится в подкаталоге домашней страницы?)

Попробуйте использовать абсолютные пути к каждому изображению в CSS (например, url("/images/splash_projects.png")) - возможно, IE6 разрешает изображения относительно содержащей страницы, а не файла CSS (зависит от того, является ли ваш CSS встроенным или во внешнем файле Я полагаю.)

0 голосов
/ 07 августа 2009

Я думаю, что использование свойства min-height иногда будет работать.

Попробуйте следующий код. 

#splash {
    min-height:130px; /* first */
    height:auto !important; /* second */
    height: 130px; /* third */
}

#splash.homepage { 
    background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll; 
}
#splash.projectspage { 
    background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll; 
}

Примечание: пожалуйста, используйте тот же порядок CSS в #splash selector.

0 голосов
/ 07 августа 2009

Держу пари, что проблема связана именно с неправильной обработкой IE6 файлов .pngs. Чтобы проверить, попробуйте заменить эту графику GIF или JPG и проверить, правильно ли работают селекторы.

Как только вы определили, что это проблема с pngs, попробуйте использовать плагин Supersleight jQuery.

0 голосов
/ 07 августа 2009

Почему вы беспокоитесь о ie6? В любом случае это работает в ie7 и ie8. Вы уверены, что это не проблема с PNG? Попробуйте с изображением в формате jpg или gif.

0 голосов
/ 07 августа 2009

Попробуйте вынести кавычки вокруг ваших URL-адресов в спецификаторы фона или измените их на одинарные кавычки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...