Объединение в цепочку классов CSS в IE6 - Пытающийся найти решение jQuery?

Я считаю, что если вы внимательно посмотрите, как IE6 обрабатывает цепочку классов, и если порядок классов имена согласованы, то вы можете избежать некоторых проблем IE6 с помощью тщательного кодирования классов.

Сначала взгляните на предоставленный вами пример HTML:

<div class='blocks four-col-1 orange highlight'>Some content</div>

IE6 применит CSS в порядке имен классов, начиная с «блоков» и заканчивая «выделением».

Теперь посмотрим на свою первоначальную группу классов:

.blocks {margin-right:10px;}
.orange {background-image:url(someimage.jpg);}
.highlight {font-weight:bold;}
.four-col-1 {width:300px;}

Они будут применяться без каких-либо проблем, поскольку каждый применяет разные свойства. Однако, если вам, скажем, нужно применить другой фон с «выделением», вы должны увидеть, что он заменит фон, установленный с «оранжевым».

Используя тот же логический подход, давайте посмотрим на последний класс, который вы определили:

.blocks.orange.highlight {background-colour:#dd00ff;}

Этот класс должен применяться только к объектам, к которым применены все три имени класса. Что происходит в IE6, так это то, что первые два имени класса игнорируются, и только последнее имя класса используется для применения стиля. Это означает, что любой объект, имеющий класс «выделить», получит новое свойство фона.(PS: свойство CSS должно быть background-color, без «u»)

Однако, если вы используете другие методы селектора, вы можете избежать ограничений, применив вложенные идентификаторы / классы [#section .blocks] и / или объект ассоциации [форма input.highlight]. Это усложняет процесс, который я знаю, но в какой-то момент нам просто нужно прекратить попытки полностью поддерживать устаревшее программное обеспечение.

Примечание: IE6 не получал никаких обновлений в течение двух лет, а самому браузеру девять лет. У браузера есть два преемника, а третий уже находится в разработке. Должна быть некоторая отсечка, где допускается приемлемая потеря презентации.

Хорошо ... поскольку есть некоторая путаница в том, что я спрашиваю:

Меня вызвали для работы над проектом, который почти завершен .

Нет шаблонов.

Есть более 100 страниц, закодированных вручную, и приближается срок. Вот некоторый реальный код из HTML / CSS, написанный последним парнем (не сокращенный, как указано выше):

<div class="block four-col-1 gold black-bg">
  <h1>Self Managed Super</h1>
  <a class="highlight" href="#"><span class="left bottom">
  <strong><span class="text-white">Bolster your<br />
  portfolio</span><br /></strong>
  with unique<br />
  investment<br />
  options</span>
  <img src="/AU/individuals/_images/superannuation-2.png" alt="" /></a>
</div>

<div class="block four-col-1 grey-light black-bg">
  <h1>Self Managed Super</h1>
  <a class="highlight" href="#"><span class="left bottom">
  <strong><span class="text-white">Financial <br />
  flexibility,</span></strong> <br />
  into and <br />
  throughout <br />
  retirement
  </span> 
  <img src="/AU/individuals/_images/superannuation-3.png" alt="" /></a> 
</div>

и некоторые из соответствующих CSS:

.block .highlight {display:block;position:relative;height:auto;min-height:110px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.block .highlight:hover {border:1px solid #ddd;}
.block .bottom {position:absolute;font-size:11px;line-height:12px; bottom:10px;letter-spacing:-0.2px; }
.block .left {float:left;font-size:11px;margin-left:8px;width:75%;}
.block.black-bg p, .block.black-bg p * {color:#828282;}
.block.black-bg p * span.text-white {color:#fff;} 
.block img {position:absolute;bottom:0;right:1px;z-index:0}
.block .highlight img {position:absolute;bottom:0;right:0px;z-index:0}
.highlight:hover {opacity: .75; filter: alpha(opacity=75); -ms-filter: "alpha(opacity=75)";-khtml-opacity: .75;-moz-opacity: .75; overflow:visible;}
.content .block.black-light.highlight, .block.black-light .highlight, .block.black-light 
.block-inner {background:url(/AU/_images/system/block-black-light.gif) no-repeat top left;}
.content .block.grey-light.highlight, .block.grey-light .highlight, .block.grey-light 
.block-inner {background:url(/AU/_images/system/block-grey-light.gif) no-repeat top left;}

.content .block.orange.highlight, .block.orange .highlight, .block.orange .block-inner {background:url(/AU/_images/system/block-orange.gif) no-repeat top left;}
.content .block.gold.highlight, .block.gold .highlight, .block.gold .block-inner {background:url(/AU/_images/system/block-gold.gif) no-repeat top left;}
.content .block.blue-light.highlight, .block.blue-light .highlight, .block.blue-light .block-inner {background:url(/AU/_images/system/block-blue-light.gif) no-repeat top left;}
.content .block.blue-dark.highlight, .block.blue-dark .highlight, .block.blue-dark .block-inner {background:url(/AU/_images/system/block-blue-dark.gif) no-repeat top left;}
.content .block.black-light.black-bg.highlight, .block.black-light.black-bg .highlight, .block.black-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-black-light.gif) no-repeat top left;}
.content .block.grey-light.black-bg.highlight, .block.grey-light.black-bg .highlight, .block.grey-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-grey-light.gif) no-repeat top left;}
.content .block.orange.black-bg.highlight.block.orange.black-bg .highlight, .block.orange.black-bg .block-inner {background:url(/AU/_images/system/black-block-orange.gif) no-repeat top left;}
.content .block.gold.black-bg.highlight, .block.gold.black-bg .highlight, .block.gold.black-bg .block-inner {background:url(/AU/_images/system/black-block-gold.gif) no-repeat top left;}
.content .block.blue-light.black-bg.highlight, .block.blue-light.black-bg .highlight, .block.blue-light.black-bg .block-inner {background:url(/AU/_images/system/black-block-blue-light.gif) no-repeat top left;}
.content .block.blue-dark.black-bg.highlight, .block.blue-dark.black-bg .highlight, .block.blue-dark.black-bg .block-inner {background:url(/AU/_images/system/black-block-blue-dark.gif) no-repeat top left;}

(Код, по сути, точно такой, как он его написал, во всех это неформатированная, отвратительная красота.)

Если вы потрудитесь прочитать все это (а большинство из вас, вероятно, не могут - отсюда и мои сокращения выше), вы увидите, что хотя некоторые классы уникальны и не конфликтуют, некоторые делают . В результате некоторые блоки, которые, как ожидается, будут черными, в EI6 будут синими, а поля в EI6 часто неправильные, а изображения с абсолютным позиционированием также ломаются, особенно в сочетании с IE PNGFix, чтобы они выглядели прозрачными, как ожидалось.

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

Осталось только два варианта редактирования. Измените CSS, чтобы он работал во всех браузерах (как это вызывается на каждой странице), или сгенерируйте некоторый Javascript (опять же, это можно вызвать на каждой странице с помощью включения), чтобы что-то сделать с HTML на каждой странице сайта, или еще что-то хитрое. Изменить код на включенных страницах просто, изменение HTML в каждом из рассматриваемых блоков невозможно.

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

Спасибо всем, кто прочитал это, но я действительно пытаюсь найти какое-то супер хитрое решение всей проблемы несвязанных классов в IE6. потенциально для более широкого использования, чем этот проект. Однако теперь у меня есть только 5 рабочих дней, чтобы найти ответ до истечения моего контракта, поэтому, если мы этого не сделаем, мы просто взломаем таблицу стилей IE6, которая заставляет все блоки отображаться в этом браузере одним способом, и оставим все как есть. Я бы предпочел найти универсальное решение, но ... Надеюсь, через 18 месяцев количество пользователей IE6 будет настолько низким, что это больше не проблема.

Спасибо всем.

Ура,

Майк.

Думаю, вы упустили суть моего предыдущего комментария. Меня не смутил ваш запрос, но я пытался объяснить, как вы можете подойти к задаче, если кодировка сайта будет согласованной.

Для более подробного примера возьмем строку из вашего последнего примера CSS без фактических свойств стиля:

.content .block.orange.highlight, .block.orange .highlight, .block.orange .block-inner { }

Следуя поведению Internet Explorer 6 в отношении связанных классов CSS, эта строка кода будет видна IE6 как:

.content .highlight, .orange .highlight, .orange .block-inner { }

Обратите внимание, что связанные имена классов игнорируются для всех, кроме фамилии в цепочке. Поскольку вы уже отклонили решения JavaScript, предложенные другими, единственное решение, которое я вижу, - это проектировать определения классов CSS с учетом этого ограничения IE6 при написании кода.

Это не упрощает задачу, поскольку основная причина объединения классов состоит в том, чтобы иметь возможность применять специальные условные стили без увеличения узлов DOM документа. Однако для продолжения поддержки расширенного программирования функций в IE6 без помощи некоторых решений JavaScript вам просто придется приложить больше усилий, чтобы найти более старые традиционные методы для того же результата. Я знаю, что этот комментарий, вероятно, немного запаздывает для вашего проекта, но я надеюсь, что он поможет в процессе планирования при работе со стилем IE6.