Internet Explorer и грешното му интерпретиране на CSS

Internet Explorer грешно интерпретира CSS. Разберете защо се получава това грешно интерпретиране и как да го заобиколите, за да може уеб страницата ви да изглежда еднакво във всички браузъри.

Често се оказва трудна задача да накараме CSS базирани уеб страници да изглеждат еднакво във всички браузъри. Повечето от проблемите се касаят до Internet Explorer и различното интерпретиране на CSS командите, за разлика от повечето браузъри, които го правят според стандартите. Но не всичко е загубено обаче. Всички различия, които виждате в различните браузъри, се дължът на еднакви разногласия от страна на Internet Explorer с CSS.

1. Елементите на страницата са стеснени в Internet Explorer

Може би най-известният Internet Explorer и CSS проблем е грешното представяне на CSS box модела от Internet Explorer, което е причина за стесняването на елементите в IE. Всеки HTML елемент по същество е кутия (box), на който ширината е сумата от неговите отстъпи от останалите елементи (margins), рамките му (borders), отстъпа отвътре между рамките и съдържанието му (padding) и съдържанието на елемента. Представете си следното css правило:

div {
    margin: 5em;
    padding: 4em;
    border: 1em solid green;
    width: 30em;
}

Според горните правила, всеки div ще е широк общо 50em. Този размер се получава от 30em широчина за съдържанието, и 4em padding, 1em рамки и 5em (не се виждат) margin отляво и отдясно на div-a.

В Internet Explorer обаче, рамките и padding-а са включени в ширината на съдържанието. Ето защо в Internet Explorer ширината на съдържанието е 20em (30em без 5em padding и рамки от двете страни), а общата ширина на div-а е само 40em.

Този проблем с CSS box модела се среща в Internet Explorer 5.x и може да се срещне в Internet Explorer 6, в зависимост от това как сте задали ISO величината в HTML кода. Има два начина да го зададете:

<?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Първата команда е поставена на най-горния ред в HTML документа, а втората може да се постави навсякъде в <head></head>. Според правилана за правилното писане на XHTML страници, е нужно задължително да се използва една от двете команди. W3C препоръчват използването на първата, понеже втората за в бъдеще ще бъде премахната постепенно.

Но като използвате първата команда обаче, Internet Explorer 6 ще представи CSS box модела неправилно, точно като 5-тата версия на браузъра. За да коригирате този проблеми, ще трябва да вмъкнете CSS хак, който да изпрати различни ширини за различните браузъри. CSS хака, който използвате, ще зависи от това коя ISO величина сте въвели.

За да оправите само IE5.x, използвайте следните CSS команди:

div {
    margin: 5em;
    padding: 4em;
    border: 1em solid green;
    width/**/:/**/ 40em;
    width: 30em
}

За да оправите Всички версии на IE, използвайте следните CSS команди:

div {
    margin: 5em;
    padding: 4em;
    border: 1em solid green;
    width: 40em
}
html>body div {
    width: 30em
}

(Погледнете статията CSS hacks & browser detection /На английски език/, за да разберете как действа този хак и да откриете други като него.)

2. "Разливането" на текста от кутията му в различните от IE браузъри

Internet Explorer, за разлика от останалите браузъри, ще разшири границите и фона на кутията, така че текста да не излезе от елемента.

Да предположим, че на div сме задали class="box" и са му приложени следните CSS команди:

.box {
    width: 40px;
}

Различните от IE браузъри, ще се придължат към правилото width: 40px, така че кутията няма да се разшири, за да напасне всякакъв текст, който е по-широк от 40px. IE обаче, разбира width като min-width, и по този начин ще разшири div-а, за да напасне текста (същото се прилага и с height и min-height).

За да сте сигурни, че текста няма да излезе от кутията във всички браузъри, трябва да използвате следното CSS правило, като го добавите към по-горното:

html>body .box {
    width: auto;
    min-width: 40px
}

IE ще пренебрегне тази CSS команда, понеже тя съдържа html>body в началото си (разберете повече за метода от статията CSS hacks & browser detection). Тази команда е само за браузъри, различни от IE. Първото CSS правило, width: auto, прекратява оригиналното width такова. Втората команда, min-width: 40px тогава задава минималната ширина на кутията, така че кутията винаги да се разширява, за да побере текста.

3. Изчезващите background images

IE има много откачен бъг, който кара фоновите картинки (и понякога дори и текста - от части, ако има float елемти наоколо) да изчезват. Това най-често се случва, когато скролирате нагоре и надолу в уеб страницата и обикновено можете да накарате картинките да се появят отново, единствено като refresh-нете страницата.

Очевадно е, че няма да искате посетителите на страницата ви всеки път да я презареждат, за да видяд напълно фоновите изображения. Откаченото решение на този откачен проблем, е да вмъкнете CSS командата position: relative в CSS правилото, в което е зададено фоновото изображение:

.foo {
    background: url(filename.jpg);
    position: relative
}

От време на време това няма да работи, затова другото решение е да се зададе ширина или височина на елемента с фоновото изображение. Може да не искате да задавате височина или ширина, затова решението е да зададете височина от 1% за Internet Explorer. Понеже IE интерпретира height като min-height (вижте точка 2), това CSS правило няма да афектира появата на елемента:

.foo {
    background: url(filename.jpg);
    height: 1%
}
html>body .foo {
    height: auto
}

CSS командата height: 1% е прекратена от height: auto. Internet Explorer не разбира html>body, затова IE пренебрегва това правило, като не го вижда.

4. Ширини, работещи единствено и само под Internet Explorer

Всеки HTML елемент е или block или inline елемент. Примери за block елементи, са <div>, <p>, <h1> и <li>. Примери за inline елементи, са <span>, <a>, <lable>, <strong> и <em>.

Една от характеристиките на inline елементите, е това, че не можете да променяте ширината на inline елемнт. Следното CSS правило не трябва, на теория, да работи:

span {
    width: 100px
}

Това CSS правило няма да работи, освен в IE, където всеки span ще има вече ширина от 100px. Във всеки друг браузър обаче, ширината на span ще бъде просто ширината на броя символи, съдържащи се от елемента. Решението ли? Направете span block level елемент:

span {
    width: 100px;
    display: block
}

(Превръщайки span в block елемент, ще накарате width командата да работи във всеки браузър, но това ще накара span да стои самостоятелно на реда. За да се преборите и с този проблем, ще трябва да зададете float: left на span елемента.)

5. В IE се появява нестилизирана версия на страницата

Когато страницата ви се зарежда в Internet Explorer, нестилизирана версия на страницата ви се появява за секунда - две. Ако е така, уеб страницата ви може би страда от проблема, известен като Flash Of Unstyled Content (ил FOUC).

Ако използвате @import (примерно <style type="text/css">@import "styles.css";</style>), за да извикате CSS файла си, тогава този феномен може да се случи на уеб страницата ви. Странно е, няма логично обяснение за това, но този проблем очевадно се нуждае от коригиране.

Простото решение на този нелогичен проблем е съответно също толкова нелогично - вмъквате link или script елемент в хедъра:

<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" media="print" />

Няма значение кое от двете ще използвате (а може и двете). Ако давате print стилове, използваме link елемент да го обясни (като в примера по-горе), тогава никога няма да се срещнете с FOUC феномена.

6. Уеб страница с фиксирана ширина не стои в центъра на прозореца

Имате уеб страница с фиксирана ширина, която не може да се центрира в прозореца при Internet Explorer? Или пък можете да я центрирате в IE, но не и при другите браузъри? Не се плашете, вината не е ваша! За съжаление, правилният начин да се центрира съдържание през CSS всъщност не работи в IE:

#container {
    width: 770px;
    margin: 0 auto
}

Втората команда, margin: 0 auto, просто дава автоматични отстъпи на елемента отляво и отдясно, по този начин съдържанието е в центъра на прозорореца на браузъра.

IE обаче, ще се нуждае от различни команди, за да проработи:

body {
    text-align: center
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left
}

Това най-накрая ще центрира съдържанието и в IE. За да защитим текста от центриране, добавихме и text-align: left към cotainer div-а.

Тази статия е написана от Trenton Moss, който е луд на тема използваемост и достъпност. Той е основател на Webcredible, сащо така е консултант по уеб използваемост и достъпност, и е невероятно добър в тренирането по използваемост и тестването на използваемостта.

Превод: Илиян Бетовски, 5 май 2007

Източник: http://www.babailiica.com/articles/css-internet-explorer.html