Как заставить IE6 уважать атрибут класса?

Question

Долгое время читатель, первый постер спрашивает:

После многих недель трагедии в Google и на форуме я все еще в растерянности. У меня есть ряд вложенных div, некоторые с идентификаторами, некоторые с классами, а некоторые с идентификаторами и классами.

Он строгий XHTML и проверяет. Оригинальный код http://www.drewsonne.com/melonstack/?topic=brisbane

например.

<div id="main">
  <div class="rEntry" id="r1">
    <a href="http://www.brisbane.com">City of Brisbane</a><br>
    <span id="rSum1" class="rSum">This is a website summary</span>
  </div>
  <div class="rEntry" id="r2">
    <a href="http://www.brisbane.gov.au">City of Brisbane</a><br>
    <span id="rSum2" class="rSum">This is a website summary as well</span>
  </div>
    ... et cetera ...
</div>

В целях тестирования мой CSS в настоящее время выглядит следующим образом

.rEntry{
    padding:10px;
    margin:10px;
}

Для жизни я не могу заставить этот стиль работать вообще в IE6. Если я изменю на # r1, # r2 или div, то стиль будет применен к соответствующим элементам, но ни div.rEntry, ни .rEntry не будут придерживаться стиля. Кто-нибудь знает, где я ошибся?

DJS.

Answer 1

Теперь, глядя на HTML по предоставленной вами ссылке, я не вижу никаких div-ов с классом rEntry. Затем я понял, что они генерируются динамически. Это напомнило мне, что для IE6, при добавлении CSS-классов через DOM, вы должны использовать свойство className, а не class. Другими словами, DOM IE6 не видит, что div'ы вообще имеют класс rEntry.

Как создаются эти div? Если это ваш собственный код, вы можете попробовать изменить свойства class AND className ваших элементов.

edit : Похоже, это в scripts / REsultsList.js. Попробуйте изменить строку, которая говорит:

entry_div_element.setAttribute('class', 'rEntry');

до:

entry_div_element.setAttribute('class', 'rEntry');
entry_div_element.className = 'rEntry';

Answer 2

У меня есть три совета:

1. Используйте сброс CSS (их несколько);
2. Используйте декларацию DOCTYPE , если вы еще этого не делаете, чтобы перевести IE в режим, соответствующий стандартам (а также, в соответствии со стандартами, которым может быть IE), вместо режима причуд. Я обычно использую переходный HTML 4.01 для этого, но если вы соблюдаете строгий, даже лучше;
3. Укажите ваши стили по имени элемента.

Например:

div.rEntry {
    padding:10px;
    margin:10px;
}

Чем конкретнее стиль, тем больше его значение в CSS для определения того, какой из них применяется. Вы можете увидеть, в этом ли проблема, протестировав ее с помощью !important:

div.rEntry{
    padding:10px !important;
    margin:10px !important;
}

Если это решит проблему, то у вас есть другой CSS, который имеет приоритет. Я подозреваю, что это проблема, поскольку селекторы #id имеют более высокий приоритет, чем селекторы .class, что является поведением, которое вы видите.

Примечание: Я не рекомендую использовать !important в качестве общего правила, просто чтобы найти проблемы с приоритетом CSS. После выявления, как правило, лучше исправить их «правильным» способом.

Answer 3

Я только что перешел по ссылке "оригинальный код", и ваш CSS читает:

div.rEntry{
    margin:10px !important;
}   padding:10px !important;

Похоже, ваш стиль заполнения находится за пределами скобки. Вы уверены, что это не только из-за опечатки?