Съвместимост на уеб страници с Internet Explorer (IE)

Най-трудната задача пред всеки уеб дизайнер е как да направи сайта си съвместим с различните версии на Internet Explorer. Колкото е по-стара версията, толкова задачата става по-трудна.

Ето няколко решения, които са лесни и съдържат "чист" код.

1. Изпълнение на CSS, който се вижда само в IE 6 и IE 7. Това може да стане с добавяне само на един символ. Ето и самия код:

#myelement

{

color: #999; /* shows in all browsers */

*color: #999; /* notice the * before the property - shows in IE7 and below */

_color: #999; /* notice the _ before the property - shows in IE6 and below */

}

[/CODE]




[b]2. Използване на условия, които се виждат само от IE[/b] и нито един друг браузър. Може да се конкретизира и версията на браузъра в този код.

Код, който се показва на [b]всички версии IE[/b]

[CODE]

<!--[If IE]> HTML <![endif]-->

АКо искаме само IE 6 да вижда кода, ще стане:

<!--[If IE 6]> HTML <![endif]-->

[/code]




Ако добавим една удивителна в кода (!) ще насочим HTML кода към [b]всички версии, без посочената[/b]:

[code]

[If !IE 6]

Този код ще се покаже на IE 5, 5.5, 7 и всички по-късни. Използване на 'lt' - съкращение на "less than" - по-малка от посочената. По този начин:

[If lt IE 6]

[/code]


ще избере версии IE 5 и 5.5



А кода [b]lte[/b] (less than or equal) ще се насочи към по-малка или равна на посочената версия.



[code]

[If lte IE 6]

ще избере IE 5, 5.5 и 6. На същият принцип се използват съкращенията gt ((greater than) и gte (greater than or equal).

[If gt IE 6]

[/code]


ще избере всички версии, излезли след IE 6. A кода:

[code]

[If gte IE 6]

е насочен към версии IE 6 и по-късни. Използване на скоби () в условията, заедно с и/или:

[if (gt IE 5)&(lt IE 7)]

[/code]


Насочен към версии по-големи от 5 [b]и[/b] по-малки от 7



[code]

[if (IE 6)|(IE 7)]

Показва се само на версии 6 ИЛИ 7 Има и начин да се скрие съдържание от IE. Тоест то ще се вижда от всички останали браузъри, без IE. Кодът ще бъде:

<!--[if !IE]>-->

HTML

<!--<![endif]-->

[/code]






Примери:



[code]

<!--[if IE 7 | IE 8]>

Ползвате версия 7 или 8 на IE

<![endif]-->

<!--[if !(IE 7) | !(IE 8) ]><!-->

Ползвате версия, различна от 7 или 8 на IE

<!--<![endif]-->

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->

<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->

<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->

<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->

<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->

<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->

<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

[/code]