Совместимость CSS IE7 - проблема IE8

Проблема:

Спасибо, что нашли время прочитать это. У меня проблема, которую мне нужно решить как можно проще. Есть веб-сайт, который я заново разрабатываю, но с тех пор, как я обновился до IE8, я совершенно забыл об IE7, но, конечно, все еще есть люди, которые его используют.

Мне нужно знать, какие именно вещи я должен изменить, чтобы этот сайт отображался так же, как в IE8. Но я не знаю, с чего начать. Есть ли у кого-нибудь в этом опыт, который может дать мне рекомендации? Есть ли для этого сценарии?

URL: http://www.testsite.c-tz.nl/

Если вы посмотрите на это с IE8, это выглядит идеально.

Но если вы посмотрите на это с IE7, все не там, где должно быть, очень уродливо.


css cross-browser internet-explorer-7 ie8-compatibility-mode
person C-TZ    schedule 01.04.2011    source источник
comment
Это слишком общий вопрос.   -  person Joshua Carmody    schedule 01.04.2011
comment
Нет жестких правил. Работайте поэлементно, пока он не будет выглядеть одинаково. В идеале вы должны тестировать во всех распространенных браузерах.   -  person Ant    schedule 01.04.2011
comment
вы можете протестировать свой IE8, использовать панель инструментов разработчика и переключить его на стандарты IE7   -  person clairesuzy    schedule 01.04.2011
comment
lol wtf, я понял - баллы за вопрос ?? lol ..: - / Мне просто интересно, что люди об этом думают. Боже, я даже дал ссылку, чтобы люди могли посмотреть код !! Проклятье.   -  person C-TZ    schedule 07.04.2011

Ответы (2)


arrow_upward
0
arrow_downward

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

Я заметил одну вещь: IE имеет проблемы с display: inline-block на элементах, которые изначально были block элементами. Либо используйте span (возможно, только если он не содержит элементов блока), либо используйте другой метод для размещения блоков рядом, например float.

Кстати, у вас слишком много div в вашем HTML. Необязательно заключать каждый img, каждый ul и т. Д. В отдельный div. Обычно любые стили, которые вы применяете к div, также могут быть применены напрямую к "обернутому" элементу.

person RoToRa    schedule 01.04.2011
comment
это правда, что IE6 / 7 не поддерживает полностью встроенный блок, но нет необходимости переходить на встроенный элемент, просто добавьте новое правило для всех элементов, у которых есть встроенный блок, и добавьте его (в конце листа после всех другие правила): .class1, .class2, .class3, li, h3 {display: inline !ie7;} замените эти имена классов и элементы на все те, которые встроены в блок на вашем листе, и поместите их отдельно, не пытайтесь добавить в существующие правила;) - person clairesuzy; 01.04.2011
comment
Что это за !ie7 декларация? Это где-то задокументировано? - person RoToRa; 01.04.2011
comment
это хак для подачи CSS только в ie7 и ниже, вы можете просто поместить правило display: inline в условный комментарий без бита !ie7 .. Подробнее здесь фактический текст ie7 не важен, но служит напоминанием для чего (или для кого;)) это правило - person clairesuzy; 01.04.2011
comment
Из понравившегося вопроса: Предупреждение: здесь используется недопустимый CSS! Это хороший повод избегать этого. Есть лучшие (и действительные) способы применения стилей к определенным версиям IE. - person RoToRa; 01.04.2011
comment
да, я сказал, что условный комментарий подойдет, лучше субъективно, это то, что вы на самом деле предпочитаете ... намного сложнее ввести полное условное правило в этих здесь комментариях;)) - дело в том, что правило display:inline будет избегать без надобности изменение HTML - person clairesuzy; 01.04.2011
comment
Это был очень полезный пост! Thnx =] Я воспользуюсь правилами! Ie7 и посмотрю, что я могу с ними сделать! Очень полезно. Я все еще злюсь на глупых людей, которые дали мне баллы за вопрос .. Идиоты, смеется. - person C-TZ; 07.04.2011
comment
Я использовал правило! Ie7, очень удобно! Сделал именно то, что было упомянуто, сделал общий класс для всех элементов inline-block: {display: inline! Ie7; zoom: 1! ie7;} Я также заметил, что в моем случае 'display: inline-block;' добавление правила после этого - ›'float: left! ie7' помогло мне, потому что 'inline-block' не распознается, и у меня было ДВА элемента в div nexto друг друга. С ТРЕМЯ элементами рядом с каждым было труднее. Я сделал следующее: изменил ширину, один раз общую ширину: 10em и строку после этого: width: 7em! Ie7, потому что почему-то 'em' не является общим термином для ie7 по сравнению с IE8 / firefox / и т. Д. - person C-TZ; 08.04.2011

arrow_upward
0
arrow_downward

Это не крутая идея ... Но вы можете попробовать, когда вам плохо с очень старыми браузерами, такими как ie6 или ie5 ...

1. используйте javascript для определения браузера и версии ..

2. позже используйте аналогичный способ перенаправления посетителя для загрузки IE 8 ..

<script>
 if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{

alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43" 
}
//document.write(''+browserName+''+fullVersion+''); 
</script>
person Community    schedule 07.05.2012