1. Windows XP SP3
2. EditPlus 2.31
3. TopStyle 3.12
4. putty
5. Adobe Photoshop Elements 6.0

Возвращение к корням, ткскть. К табличной верстке тоже, да. А вообще html/css заебал уже, хуета занудная.

Ну и напоследок: макинтош дерьмо, маккеган круче пасториуса, широкова нахер. Всем привет.

В спецификации CSS предусмотрены правила min-width/min-height и max-width/max-height. К сожалению, Internet Explorer поддерживает эти правила только начиная с седьмой версии. Однако, это ограничение можно обойти.

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

style.css:

#element {
    min-height:300px;
    }

Как говорилось выше, В IE это будет работать только в седьмой версии. К счастью, в IE есть баг в обработке правила height. По сути, height ведет себя так же как и min-height, именно на этом основан наш workaround. Обратите внимание, что мы используем «star html hack», чтобы не задавать значение height для IE 7.

ie.css:

* HTML #element {
    height:300px;
    }

Обращу ваше внимание, что при использовании height для эмуляции min-height, overflow:hidden использовать нельзя, иначе в IE height начнет работать так же, как и в нормальных браузерах.

min-width, max-width

С эмуляцией минимальной и максимальной ширины все несколько сложнее. Для этого понадобится использовать IE-only правило expression (NB: это свойство не является валидным по текущему стандарту CSS и должно использоваться через conditional comments).

Хитрость в том, что внутри expression мы можем выполнять JavaScript.

#element {
    width:expression(some javascript goes here);
    }

Для задания минимальной ширины используем следующий expression:

ie.css:

* HTML #element {
    width:expression((document.body.clientWidth||document.documentElement.clientWidth)  > 760 ? 'auto' : '760px');
    }

Для минимальной и максимальной ширины одновременно:

ie.css:

* HTML #element {
    width:expression(document.body.clientWidth<=760?'760px':(document.body.clientWidth>1100?'1100px':'100%'));
    }

Данные правила, естественно, не будут работать у пользователей с отключенным JavaScript.

Материалы к изучению:

• min-width для IE
• max-width в Internet Explorer
• min-width for Internet Explorer without Java Script?
• Тонкий CSS для Internet Explorer (expression)

Авторство данного метода принадлежит Кэмерону Адамсу (Cameron Adams). Благодаря приведенной технике вы можете прижать ваш подвал к низу страницу при малом размере контента и сохранить нормальное положение вещей, когда контент требует вертикальной прокрутки.

<div id="header-content">
    <div id="header">
        Шапка сайта
    </div>
    <div id="content">
        Основная контентная часть
    </div>
</div>
<div id="footer">
    Подвал
</div>

Обратите внимание, что вся разметка макета, кроме подвала, должна быть заключена в контейнер, в данном случае div#header-content.

style.css:

html,
body {
    height:100%; /* Растягиваем документ на всю высоту окна */
    }
#header-content {
    position:relative;
    min-height:100%; /* Минимальная высота основной части макета */
    }
#content {
    padding-bottom:3em; /* Пространство необходимое, чтобы подвал не залезал на основную часть при большом количестве контента */
    }
#footer {
    position:relative;
    height:3em; /* Высота подвала, указывать необязательно, но полезно при разработке */
    margin:-3em 0 0; /* Поднимаем футер наверх */
    }

ie.css:

* HTML #header-content {
    height:100%; /* Эмулируем min-height для IE <7 */
    }

Материалы для изучения:

• footerStickAlt: A more robust method of positioning a footer
• footerStick

Поскольку мы уже сошлись на отказе от таблиц в пользу семантики, нам потребуется минимум html-кода:

<div class="announce">
    <img src="pic.gif" alt="" />
    <h2><a href="#">Россияне помогли</a></h2>
    <p>Полиция турецкого города Измир сообщила об аресте 17 участников группировки, занимавшейся мошенничеством и рассылкой вирусов в Сети.
     Арест произошел после того, как местные полицейские выяснили, что трое русских хакеров отправили в общей сложности миллион писем с
     вирусами и получили доступ к банковским счетам многих жителей Турции.</p>
</div>

Зададим картинке float, чтобы прижать ее налево и соответствующие макету поля:

.announce img {
    float:left;
    margin:0 10px 10px 0;
    }

К сожалению, текст обтекает картинку, а это совсем не то, что нам требуется по условию задачи. Чтобы запретить обтекание применим дополнительные стили к тексту:
style.css:

.announce p {
    overflow:hidden;
    }

ie.css:

.announce p {
    zoom:1; /* Для IE 7 */
   }
   * HTML .announce p {
        height:1%; /* Для IE 5,6 */
        }

Voila!

Внимательный читатель безусловно заметит, что для реализации задачи мы воспользовались правилами, указывающими Explorer’у на hasLayout. Таким образов еще раз показав их полезность.

Материалы для изучения:

• display:table
• Pup’s Box Flow Hack

Пять инструментов, чаще всего используемых в работе. Скриншоты правда с домашней машины.

1. Ubuntu. Тут, в общем, без вариантов. Я частенько ругаю убунтятину за работу с самбой, но в целом понимаю, что на тот же мак переходить нерационально. А второй рабочий ноут мне вряд ли дадут :) Короче мой выбор.
   
2. Komodo Edit. Лучший редактор. Не по расчёту, но по любви. HTML/CSS/JS/XML/XSLT.
3. Photoshop 7.0/Wine. Gimp у меня всё-таки не пошёл, а тут всё знакомо можно сказать с детства. Вива адобе.
4. Meld. Совершенно опиздонительный diff/merge для Gnome. Файлы, каталоги, ветки CVS. Конечно хочется поддержку SVN, но со сравнением двух виртуальных хостов справляется легко.
5. Терминал. Последний по списку, но не последний по качеству. Из этой штуки можно делать почти всё. А если открыть вторую вкладку, то вообще всё. За Ctrl-R я почти продал душу дьяволу.
6. Ну и оффтопиком.. Guitar Pro. Любимейшая программа на данный момент, без вариантов. Декабрьский скриншот.

Представим себе кусочек макета, присланного нам дизайнером. На нем изображено главное меню будущего сайта:

Пункт меню «Обратная связь» показывает поведение при наведении мышкой.

Если забыть на время про семантику, то наше меню можно представить в HTML приверно так:

<table id=”main-nav”><tr>
        <td><a href=””>Новости</a></td>
	  …
    </tr>
</table>

Набросать небольшой CSS, использовать Javascript для подсветки пункта при наведении мышкой и жить счастливо. Но не правильно.

При таком подходе мы теряем первичный структурный смысл нашей навигации. Любое меню — прежде всего список. Не даром мы говорим именно «пункт меню» и читаем книги, в которых оглавление более всего похоже именно на список.

Поэтому, вспомнив о семантике документа мы напишем код нашей навигации следующим образом:

<ul id=”main-nav”>
    <li><a href=””>Новости</a></li>
    …
</ul>

Первый шаг к светлому будущему. Однако наше горизонтальное меню в данный момент выглядит в браузере следующим образом:

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

Немного магии CSS

Начнем с решения двух вышеназванных проблем:

* {margin:0;padding:0;}
body {
    padding:40px;
    background:#FFF;
    font:100.01% Tahoma,Helvetica,sans-serif;
    color:#000;
    }
ul#main-nav {
    float:left; /* Предотвращаем эффект, при котором список не охватит внутри себя свои пункты. Это будет видно, если задать ul видимые границы */
    font:bold .75em Tahoma,Helvetica,sans-serif; /* Устанавливаем параметры шрифта */
    }
ul#main-nav li {
    float:left; /* «Прижимаем» элементы списка налево, эмулируя горизонталь */
    list-style:none; /* Убираем маркеры у пунктов списка */
    }

Я не буду здесь останавливаться на механизмах работы правила float, так о нем можно писать целые книги. Подробное объяснение на русском можно почепнуть в статье Ивана Сагалаева «Раскладка в CSS: float».

В итоге мы получили следующий результат:

Как видите, мы уже значительно ближе к намеченной цели. Осталось лишь дописать оформительские эффекты. Все было бы очевидно, если бы не одно — нам необходимо организовать подсветку пункта меню при наведении на него мыши.

Javascript? Не наш метод

В стандарте CSS 2.1, который является текущим, предусмотрен псевдоселектор :hover, благодаря которому мы можем менять стиль элемента по тому же принципу, как делаем при onmouseover при помощи Javascript. Одна проблема — IE шестой версии и ниже применяет :hover только к ссылкам. Флагманы технического прогресса, что уж тут скажешь.

Но не стоит отчаиваться. Поскольку наш список все-таки является навигацией, в нем совершенно очевидным образом находятся ссылки, к которым :hover в IE 5 и 6 можно применить без лишних проблем. Заодно на ссылки мы навесим и другие элементы оформления, такие как оступы, границы и цвет.

ul#main-nav li a {
    display:block; /* Делаем ссылки блочным элементом, чтобы они могли нативно работать с внутренними полями */
    position:relative; /* Небольшой «хак», чтобы в IE кликабельная область распространилась на внутренние поля */
    padding:4px 8px; /* Внутренние поля */
    background:#FFF; /* Цвет фона */
    border:1px solid #CCC; /* Границы */
    border-width:1px 0 1px 1px;
    color:#47AAE9; /* Цвет шрифта */
    }
    ul#main-nav li a:hover {
        background:#F2F2F2; /* Цвет фона при наведении на ссылку */
        color:#000; /* Цвет шрифта при наведении на ссылку */
        }

Осталась небольшая деталь. Так как мы не рисовали правую границу для ссылок внутри элементов списка — у нашего меню не хватает правой границы. Конечно можно было бы задать класс последнему элементу списка и переопределить нужные стили, но в данном случае можно сделать все проще и без лишней разметки. Достаточно лишь добавить границу самому списку.

ul#main-nav {
    float:left;
    border-right:1px solid #CCC;
    font:bold .75em Tahoma,Helvetica,sans-serif;
    }

Отлично, не правда ли? Мы добились не только нужного визуального отображения, но и поведения, при этом используя лишь семантически верную HTML-разметку и CSS.

У данного решения есть один минус — в Opera седьмых версий элементы списка не выстроятся линию, пока мы не зададим списку конкретную ширину. Это проблема продвинутого уровня и я не буду на ней останавливаться. Попытайтесь найти решение самостоятельно.

Разберем использование отрицательных полей на примере. Мы сверстаем трехколоночный макет с двумя фиксированными боковыми колонками, тянущейся центральной, шапкой и подвалом.

html:

<div id="header">
    Шапка
</div>
<div id="container">
    <div id="nav">
        Левая колонка
    </div>
    <div id="content">
        Контент
    </div>
</div>
<div id="sidebar">
    Правая колонка
</div>
<div id="footer">
    Футер
</div>

Обратите внимание на то, что левая и центральная колонки объединены общим контейнером. Именно для этого контейнера мы установим отрицательное поле, которое «подтянет» правую колонку.

style.css:

body {
    padding:20px;
    background:#FFF;
    color:#000;
    }
#header {
    padding:10px;
    background:#51CAC8;
    }
#container {
    float:left; /* Делаем контейнер плавающим, чтобы добиться нужного поведения */
    width:100%; /* Указываем контейнеру занимать все доступное пространство */
    margin:10px -170px 10px 0; /* Устанавливаем отрицательное правое поле, чтобы подтянуть правую колонку */
    }
#nav {
    float:left; /* Прижимаем блок налево */
    width:150px; /* Обращаем внимание, что фактическая ширина блока = 170 пикселям */
    padding:10px;
    background:#E73D00;
    }
#content {
    margin:0 150px 0 170px; /* Устанавливаем поля, чтобы контент не «налезал» на боковые колонки */
    padding:10px;
    background:#91CA00;
    }
#sidebar {
    float:right; /* Прижимаем блок направо */
    width:130px; /* Обращаем внимание, что фактическая ширина блока = 150 пикселям */
    margin-top:10px;
    padding:10px;
    background:#F5DC09;
    }
#footer {
    clear:both; /* Ставим подвал ниже самой длинной колонки */
    padding:10px;
    background:#DDDEDF;
    }

ie.css:

* HTML #nav {
    width:170px;
    w\idth:150px;
    }
* HTML #sidebar {
    width:150px;
    w\idth:130px;
    }
#footer {
    height:1%; /* Немного магии для IE5, неправильно считающего отступы */
    }

Это даст нам следующий результат:

Центральная колонка при этом будет тянуться пропорционально размерам рабочей области окна. Принципиальное отличие такого макета от таблицы с тремя ячейками заключается в том, что наши три колонки не будут одновременно тянуться по высоте, а будут занимать нужное им вертикальное пространство. При этом подвал всегда будет ниже самой длинной из них. Для того, чтобы эмулировать поведение ячеек таблиц, вам придется воспользоваться техникой faux columns.

Материалы для изучения:

• «Резиновая вёрстка»: используем отрицательные поля
• Faux Columns

Одна из ключевых особенностей cемантической валидной верстки — использование правильной блочной модели. Рассмотрим на примере, как она работает.

html:

<div id="parent">
    <div id="element">
        Lorem ipsum…
    </div>
</div>

style.css:

#parent {
    border:1px solid red;
    }
#element {
    width:200px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    background:#F2F2F2;
    }

Визуальная ширина блока 248 пикселей, несмотря на то, что четко задана ширина в 200 пикселей. Дело в том, что по спецификации CSS визуальный размер блока складывается из суммы размера области контента, величины отступов и ширины границ. Заданное нами в CSS значение ширины (width) — на самом деле ширина области контента. Отсюда мы получаем визуальную ширину блока следующим образом.

Визуальный размер блока = 200 (ширина области контента) + 40 (сумма правого и левого отступов) + 8 (сумма правой и левой границ).

Для того чтобы четко задать визуальную ширину, при написании значений размеров в CSS нужно выполнить ряд нехитрых действий. Из желаемой визуальной ширины необходимо вычесть сумму обоих отступов и сумму обеих границ. Таким образом, чтобы изобразить блок шириной 200 пиксел, необходимо задать следующее значение правила width:

width = 200 (нужная визуальная ширина блока) — 40 (сумма правого и левого отступов) — 8 (сумма правой и левой границ).

Переопределим значение правила width в CSS.

style.css:

#element {
    width:152px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    }

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

Неправильная блочная модель и кроссбраузерные проблемы

Даже при использовании полного правильного DOCTYPE, вы столкнетесь с ситуацией, когда блочная модель работает неправильно. Это связано с неправильной реализацией блочной модели в IE 5.x. В этом браузере визуальная ширина нашего примера вычисляется следующим образом:

Визуальная ширина блока = значению правила width.

Хотя такая модель может показаться более логичной, она не соответствует спецификации CSS.

Чтобы избежать различного отображения блоков в IE 5.x и более современных браузерах, необходимо применить хак с экранированием. Дело в том, что в CSS можно вполне законно экранировать символы (кроме A–F), и такие правила будут вполне корректно работать везде, кроме IE пятых версий. Так будет выглядеть хак, необходимый в данном примере:

ie.css:

* HTML #element {
    width:200px; /* Для пятых версий IE, некорректно обрабатывающих блочную модель */
    w\idth:152px; /* Для более старших */
    }

Для достижения такого же результата вы можете использовать и условные комментарии, подключая отдельный css-файл Internet Explorer версии 5.

Полезные ссылки

• Трюк с блочной моделью CSS
• Шпаргалка по CSS
• Modified SBMH (Simplified Box Model Hack)

Наиболее часто проблемы из-за этого возникают с генерацией URL’ов. Допустим, мы имеем страницу с адресом:

http://example.com/index.xml?section=catalog&cat-id=10&item-id=1404&item-unique-key=809124

Нам нужно, скажем, сгенерировать три ссылки: на главную страницу категории (cat-id), главную страницу (section) и независимую от категории страницу итема (item-id, item-unique-key).

Способов много, я по-началу даже использовал substring, но потом ради разнообразия включил моск и набросал небольшой шаблончик. Открытием для хоть сколько-то опытных разработчиков он не будет, так что будем считать это очередным self-note.

В первую очередь нам нужно надыбать xml с параметрами запроса. В идеале что-то вроде:

<state name="request">
    <param name="section">catalog</param>
    <param name="cat-id">10</param>
    <param name="item-id">1404</param>
    <param name="item-unique-key">809124</param>
</state>

Готовый вариант стилей будет выглядеть вот так:

<xsl:variable name="request" select="/page/state[@name='request']"/>

<xsl:template match="/">
    <html>
        <head>
	    <title>Custom page name</title>
	</head>
	<body>
	    <div id="place-holder">
		<ul>
		    <li>
			<a>
			    <xsl:attribute name="href">
				<xsl:apply-templates select="$request">
				    <xsl:with-param name="exclude-params" select="'item-id|item-unique-key'"/>
				</xsl:apply-templates>
			    </xsl:attribute>
			    Ссылка на общую страницу категории
			</a>
		    </li>
		    <li>
			<a>
			    <xsl:attribute name="href">
				<xsl:apply-templates select="$request">
				    <xsl:with-param name="exclude-params" select="'cat-id'"/>
				</xsl:apply-templates>
			    </xsl:attribute>
			    Ссылка на страницу итема, безотносительно категории
			</a>
		    </li>
		    <li>
			<a>
			    <xsl:attribute name="href">
				<xsl:apply-templates select="$request">
				    <xsl:with-param name="exclude-params" select="'cat-id|item-id|item-unique-key'"/>
				</xsl:apply-templates>
			    </xsl:attribute>
			    Ссылка на главную страницу раздела
			</a>
		    </li>
		</ul>
	    </div>
        </body>
    </html>
</xsl:template>

<xsl:template match="state">
    <xsl:param name="exclude-params"/>
    <xsl:text>http://example.com/index.xml</xsl:text>
    <xsl:apply-templates select="param[not(contains($exclude-params,@name))]"/>
</xsl:template>

<xsl:template match="param[position()=1]">
    <xsl:text>?</xsl:text>
    <xsl:value-of select="@name"/>
    <xsl:text>=</xsl:text>
    <xsl:value-of select="."/>
</xsl:template>

<xsl:template match="param">
    <xsl:text>&</xsl:text>
    <xsl:value-of select="@name"/>
    <xsl:text>=</xsl:text>
    <xsl:value-of select="."/>
</xsl:template>

Разберём чуть подробнее:

<xsl:attribute name="href">
    <xsl:apply-templates select="$request" name="create-url">
        <xsl:with-param name="exclude-params" select="'cat-id|item-id|item-unique-key'"/>
    </xsl:apply-templates>
</xsl:attribute>

Здесь мы запускаем шаблон для генерации URL’а, передавая ему, какие параметры не хотим видеть в создаваемом запросе. Если этих параметров в текущем URL’e нет, ничего страшного не случится.

Ну и, собственно, единственная соль:

<xsl:template match="state">
    <xsl:param name="exclude-params"/>
    <xsl:text>http://example.com/index.xml</xsl:text>
    <xsl:apply-templates select="param[not(contains($exclude-params,@name))]"/>
</xsl:template>

Не матчим те параметры, которые мы передали как исключаемые. Ну и собственно генерируем URL:

<xsl:template match="param">
    <xsl:text>&</xsl:text>
    <xsl:value-of select="@name"/>
    <xsl:text>=</xsl:text>
    <xsl:value-of select="."/>
</xsl:template>

Исключительно простая штука, которая может сэкономить начинающим кучу времени и нервов. Правда нужно еще xml получать правильный, но про пинание программеров будет в следующий раз :)

Желающие могут заценить исходники: xml, xsl.

CSS-хаки

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

Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.

Наиболее популярным хаком на сегодня остается так называемый «star html hack»:

#element {
  position:relative; /* Основное правило  для всеx браузеров */
  }
  * HTML #element {
    position:static; /* Переопределение  правила для IE младше седьмой версии */
    }

В валидных HTML- и XHMTL-документах селектор HTML всегда играет роль корневого элемента, а BODY — потомка первого уровня, но не второго или более высокого уровня. Таким образом, теоретически селектор «* HTML» не должен применяться ни к одному элементу. Но на практике IE пятых и шестых версий из-за ошибки в собственном движке интерпретируют данный селектор как HTML и применяют указываемые правила. Поскольку остальные современные браузеры селектор «* HTML» игнорируют, этот прием можно использовать в корыстных целях. Это полезно, но правильно ли?

Несмотря на то что данный хак корректен с точки зрения стандарта CSS, есть ряд негативных нюансов.

Во-первых, слово «хак» звучит странно, и разработчику уже это должно не понравиться.

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

В-третьих, в этом хаке игнорируется недавно вышедший Internet Explorer 7.0, где был исправлен целый ряд ошибок в модуле CSS (более подробно об этом вы можете почитать непосредственно в блоге разработчиков IE7 по адресу blogs.msdn.com/ie).

Как же укротить Internet Explorer, не используя хаки?

Альтернатива синице

В недрах Microsoft Developer Network есть решение получше — conditional comments. Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример элегантного использования условных комментариев:

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]-->

Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл:

style.css:

#element {
    position:relative; /* Основное правило для всеx браузеров */
    }

ie.css:

#element {
    position:static; /* Переопределение правила для IE всех версий */
    }

Теперь мы не используем хаки в основном листе стилей; добились того, что альтернативное правило было применено ко всем Explorer’ам, включая седьмой; а также избавили пользователей альтернативных браузеров от загрузки лишнего кода. При этом мы сохранили наш (X)HTML и CSS валидным, так как такой условный комментарий не распознается никем иным кроме IE, включая даже валидатор от W3C.

Условные комментарии гибче, чем кажется на одном примере. Вы можете охватить не только все Explorer’ы, но и все его версии ниже или выше определенной или конкретную его версию; а также подгрузить код, который будут интерпретировать все браузеры, кроме Internet Explorer. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

Материалы для изучения:

• раздел в Microsoft Developer Network
• Подробное объяснение синтаксиса и методологии использования
• О валидности синтаксиса условных комментариев не для IE

Укрощаем Internet Explorer или «магические правила»

Как уже говорилось выше, больше всего проблем верстальщику доставляют браузеры от Microsoft. Мы уже рассказали о том, как добавить отдельные правила только для Internet Explorer, но не коснулись того, какие же правила нам смогут помочь. Исправляем это досадное упущение.
Все перечисляемые ниже элементы управляют свойством hasLayout. hasLayout не является частью стандарта CSS и является скорее микрософтовской «заплаткой» для веб-разработчиков. Но и на том спасибо, как говорится.

Мы приводим только названия багов, для исправления которых применяются данные правила. Более подробное описание указываемых багов вы можете найти по адресу positioniseverything.net/explorer.html.

position:relative

• The IE/Win Disappearing List-Background Bug
• IE6 Border Chaos

Данное правило также часто применяется для спонтанно пропадающих блоков. Не падающих или неправильно отображающихся, а именно пропадающих. Особенно грешит этим Internet Explorer 5.0.

height:1%

• The IE6 Three Pixel Text-Jog
• The IE Escaping Floats Bug
• IE and italics (будьте осторожны с 5.0, используйте экранирование)
• IE/Win Unscrollable Content Bug
• IE/Win Guillotine Bug
• Quirky Percentages in IE6’s Visual Formatting Model

Применяется также для клиаринга элементов. Задается контейнеру, содержащему float’ы.

display:inline

• Floats, Margins and IE
• The IE Doubled Float-Margin Bug

display:inline-block;

• Quirky Percentages in IE6’s Visual Formatting Model

zoom:1

• Аналог height:1%; для IE 7.

И еще пара советов:
Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (наиболее часто это касается height:1% и zoom:1).
Во-вторых, столкнувшись с нежелательным поведением Explorer’а, которому нет документированного объяснения (или вам просто лень его искать) — попробуйте последовательно применить к проблемному элементу все правила, влияющие на свойство hasLayout. Шаманство — неотъемлемая часть нашей професии.

Материалы для изучения:

• hasLayout property в MSDN
• On having layout
• Магия для IE