Мне все еще нужно использовать этот CSS для браузеров после IE6?

Question

Меня попросили исправить какой-то CSS, созданный другим сотрудником нашей компании. Код содержит следующее:

div#bwrap {
    position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}

и:

div#mwrap {
    margin-left:0;
    voice-family: "\"}\""; 
    voice-family:inherit;
    margin-left:16px;padding: 85px 60px 35px 240px;
    font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }

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

Мне все еще нужно:

body>div#bwrap {position:fixed;}

and

voice-family: "\"}\""; 
        voice-family:inherit;

Answer 1

IE6 не поддерживает селектор >, поэтому ссылки на body>div#bwrap не будут работать в IE6.

Поскольку они фактически идентичны основным селекторам над ними div#bwrap, этоподразумевает, что биты внутри body>div#bwrap являются переопределениями для браузеров, отличных от IE6.

В первом примере IE6 будет производить элемент с позицией absolute, тогда как все другие браузеры будут позиционировать его fixed.Если вы больше не поддерживаете IE6, вы можете переместить этот стиль в основной селектор div#bwrap и удалить body>div#bwrap.

Подробнее о поддерживаемых селекторах CSS в различных браузерах можно узнать здесь: http://quirksmode.org/css/contents.html

Бит voice-family является хаком, который говорит взломанному браузеру игнорировать остальные стили в селекторе.Это также специфично для IE6, так что если вы снова отказываетесь от поддержки IE6, вы можете отказаться от хака.Вы можете узнать больше об этом хакере здесь: http://tantek.com/CSS/Examples/boxmodelhack.html

Во втором примере также есть соответствующий селектор >, который вы должны обработать так же, как и в первом примере, хотя margin-leftв любом случае указывается в обоих (поскольку они используют этот метод разделения IE6, я не знаю, почему они также обеспокоены взломом голосового семейства).

Answer 2

Взлом модели voice-family / box определенно предназначен для старых браузеров (например, IE5, старый). Более подробную информацию об этом можно найти здесь .

В позиционировании я не уверен. Вот некоторая информация , которая может иметь к ней отношение. В частности, часть "IE> = 6", где упоминается взлом и отмечается, что он ломается position: absolute;. Без контекста и учитывая формат, я бы также предположил, что он более старый. Я бы сказал, прокомментируйте это и проверьте IE7 / 8, чтобы увидеть, влияет ли это на это. Я думаю, что в IE8 есть инструменты для разработчиков (например, плагин Firebx для Firefox), хотя я не уверен насчет IE7, но вы также можете проверить их, если они доступны.

Answer 3

Мой комментарий может быть излишним, но вот мои моменты, на которые следует обратить внимание:

1. div # bwrap (Обычно вам не нужен бит 'div', его можно пропустить чище).
2. Часть голосового семейства, как уже упоминалось, является действительно старым хаком и должна быть удалена
3. Если вы явно не поддерживаете IE6, вам вообще может не понадобиться дочерний селектор ">"
4. Позиция фиксированная не работает в некоторых браузерах Webkit, таких как Mobile Safari

Если вам нужна поддержка IE6, тогда дочерний селектор - ваш лучший друг:

• # bwrap {... все браузеры - включая ie6 ...}
• html> body #bwrap {... modern override: Firefox, safari, opera, ie7 + ...}

Реализовать «современное переопределение» можно только в том случае, если вам действительно нужно исправить это в IE6.