Ошибки IE7
Браузерный движок IE7 под названием Trident претерпел существенные изменения по сравнению с предыдущей версией Internet Explorer — исправлено множество ошибок, улучшилась поддержка свойств и селекторов CSS 2.1. Но в его основе осталось то же внутреннее свойство hasLayout и все ошибки с ним связанные. К старым ошибкам добавились ещё и новые.
Стили не работающие в IE7
Когда IE7 только вышел, казалось, что без многих стилевых свойств, псевдоклассов и псевдоэлементов легко можно обойтись. Но к хорошему, как говорится, быстро привыкаешь, и теперь без многих свойств прямо как без рук.
Псевдоэлементы :before и :after
Используются для вывода определённого контента до и после элемента. В примере 5.17 показано создание пунктирной горизонтальной линии с текстом «Линия отреза».
Пример 5.17. Линия отреза |
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
XHTML 1.0 |
|
CSS 2.1 |
|
IE 6 |
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML |
1.0 Strict//EN" |
||||||||||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|||||||||||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
|
|
|
|
|
|
|
|
||||||
<head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||||||||||||||
<title>Линия |
отреза</title> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
HR { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
text-align: center; /* Выравниваем текст по центру */ |
|||||||||||||||
border: none; /* Убираем исходную границу */ |
*/ |
|
|
|
|
|
|
|
|||||||
border-top: 1px dashed #000; /* Параметры линии |
|
|
|
|
|
|
|
||||||||
height: 18px; /* Высота блока */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
background: |
url(images/scissors.png) no-repeat 10px -18px; |
||||||||||||||
} |
|
/* Параметры фона */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
HR:after { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
content: "Линия отреза"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
font-family: Arial, sans-serif; /* Рубленый шрифт для надписи */ |
|||||||||||||||
font-size: 12px; /* Размер шрифта */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
}vertical-align: top; /* Выравнивание по верхнему краю */ |
|||||||||||||||
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
до</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>Текст |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
<hr /> |
после</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>Текст |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
</body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вид страницы в IE7 показан на рис. 5.19. Кроме того, что не выводится текст под линией, у тега <hr> отображается рамка, несмотря на явный запрет на неё.
Рис. 5.19. Вид линии в IE7
Свойство content
Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before.
Свойство caption-side
Определяет положение заголовка таблицы, который задаётся с помощью тега <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы
(пример 5.18).
Пример 5.18. Заголовок таблицы XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>caption-side</title>
<style type="text/css"> table {
width: 350px; /* Ширина таблицы */
}border-collapse: collapse; /* Убираем двойную рамку между ячейками */
td {
border: 1px solid green; /* Параметры границы */ }padding: 5px; /* Поля в ячейке */
caption {
}caption-side: bottom; /* Заголовок под таблицей */
</style>
</head>
<body>
<table>
<caption>Расклад карт</caption>
<tr> <td> </td><td>♠</td><td>♣</td> <td>♥</td><td>♦</td>
</tr>
<tr> <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td>
</tr>
<tr>
<td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td>
</tr>
<tr> <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td>
</tr>
<tr>
<td>Крыса Лариса </td><td>3</td><td>1</td><td>1</td><td>8</td>
</tr>
</table>
</body>
</html>
Свойства counter-increment и counter-reset
Стилевое свойство counter-increment предназначено для увеличения значения счетчика приращений, который задаётся свойством counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили, а также делать автоматическую нумерацию заголовков, изображений, таблиц и др. (пример 5.19).
Пример 5.19. Нумерация заголовков XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>counter-increment</title>
<style type="text/css"> body {
}counter-reset: heading; /* Инициируем счетчик */
h2:before {
counter-increment: heading; /* Указываем идентификатор счетчика */ content: "Глава " counter(heading) ". ";
}
/* Выводим текст перед содержимым тега <h2> */
</style>
</head>
<body>
<h2>Теория ловли льва в пустыне</h2> <h2>Методы инверсной кинематики</h2> <h2>Ловля льва численными методами</h2>
</body>
</html>
Из-за того, что IE7 не понимает используемые в стиле свойства, заголовки будут выведены как обычно, без текста впереди.
Свойство empty-cells
Задаёт отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется. Это свойство было рассмотрено в Главе 4 (см. пример 4.10).
Псевдокласс :focus
Определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. В примере 5.20 вокруг текстового поля с фокусом добавляется оранжевая рамка.
Пример 5.20. Фокус в поле XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>:focus</title>
<style type="text/css">
input:focus { border: 1px solid orange; }
</style>
</head>
<body>
<form action="handler.php"> <p><input type="text" /></p>
</form>
</body>
</html>
Свойство outline
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. В IE7 также не поддерживаются и производные свойства outline-color, outline-style и outline-width.
Свойство quotes
Устанавливает тип кавычек, который применяется в тексте документа (см. пример 1.58).
Ошибки
Главная неприятность IE7 это большое количество ошибок, связанных с некорректной интерпретацией стилевых свойств.
@import
Не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается (пример 5.21).
Пример 5.21. Ошибка с @import |
|
|
|
|
|
|
|
|
|
|
|
|
XHTML 1.0 |
|
CSS 2.1 |
|
IE 6 |
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@import</title> <style type="text/css">
@import "style/main.css" screen;
</style>
</head>
<body> <p>...</p>
</body>
</html>
Содержимое файла main.css.
body {
background: #666; }color: #ff0;
Границы
Линия, у которой стиль задан как dotted, превращается в dashed для толщины 2px и более
(пример 5.22).
Пример 5.22. Ошибка с dotted
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Границы</title>
<style type="text/css"> P {
border: 1px dotted #000; }border-top: 2px dotted #000;
</style>
</head>
<body> <p> </p>
</body>
</html>
На рис. 5.20 линия сверху отличается по стилю от остальных линий, хотя меняется лишь толщина.
Рис. 5.20. Некорректная линия сверху
button
Любое значение в стиле button[value="x"] приводит к краху браузера!
button[value="1"] { color: red; }
display
В IE7 не поддерживаются следующие значения свойства display: inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table- row-group.
Для тега <li> значение block понимается как list-item, а значение inline-block работает только для строчных элементов.
overflow и position: fixed
Сочетание свойства overflow со значением auto или scroll с position: fixed приводит к серьёзной нагрузке на процессор и в итоге к нарушению работы браузера и операционной системы!
:first-letter и letter-spacing
Cвойство letter-spacing, когда оно применяется к псевдоэлементу :first-letter, игнорируется.
Свойство line-height
Неправильно вычисляется высота строк для изображений и элементов форм.
list-style-image и float
Для списка не отображаются картинки-маркеры, если задано свойство list-style-image одновременно с float (пример 5.23).
Пример 5.23. Нет картинок |
|
|
|
|
|
|
|
|
|
|
|
|
||
|
XHTML 1.0 |
|
CSS 2.1 |
|
IE 6 |
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
||
<!DOCTYPE |
html PUBLIC "-//W3C//DTD |
XHTML 1.0 Strict//EN" |
||||||||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
||||||||||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||||||||||
<head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||||||||||
<title>list-style-image</title> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style |
type="text/css"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
LI {
list-style-image: url('images/book.gif'); /* Картинка */ float: left; /* Выстраиваем список по горизонтали */ padding-left: 10px; /* Поле слева */
}margin-right: 30px; /* Отступ справа */
</style>
</head>
<body>
<ul> <li>Земля</li><li>Огонь</li><li>Вода</li><li>Воздух</li>
</ul>
</body>
</html>
Ошибка с выравниванием
Свойство text-align выравнивает не только текст, но и блоки. В примере 5.24 по правому краю выравнивается слой t2 и текст внутри него.
Пример 5.24. Некорректное выравнивание |
|
|
|
|
|
|
|
|
|
|
|
||||
XHTML 1.0 |
|
CSS 2.1 |
|
IE 6 |
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
||||
<!DOCTYPE |
html PUBLIC "-//W3C//DTD XHTML |
1.0 Strict//EN" |
|||||||||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|||||||||||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
|||||||||||||||
<head> |
http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||||||||||||
<meta |
|
||||||||||||||
<title>text-align</title> |
|
|
|
|
|
|
|
|
|
|
|
|
|||
<style |
|
type="text/css"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
body |
|
{ text-align: right; /* По правому краю */} |
|||||||||||||
.t1 { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}background: #fc0; padding: 10px; |
|
|
|
|
|
|
|
|
|
|
|
|
|||
.t2 { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 60%; border: 1px solid #000; background: #fff; |
|||||||||||||||
}padding: 5px; |
|
|
|
|
|
|
|
|
|
|
|
|
|||
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|||
</head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div |
class="t1"> |
|
|
|
|
|
|
|
|
|
|
|
|
||
<div |
|
class="t2">Текст, выровненный по правому краю</div> |
|||||||||||||
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вид текста в IE7 показан на рис. 5.21.
Рис. 5.21. Выравнивание по правому краю
Полезные ссылки
Подробный список найденных ошибок IE7 вы можете найти по следующим ссылкам.
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs — 188 ошибок 
http://www.quirksmode.org/bugreports/archives/explorer_7/ — 88 ошибок
Глава VI
Макеты,применяемые на сайтах
Когда продумывается дизайн сайта, учитывается объём будущей информации на нем, привычки потенциальных посетителей, удобство доступа к материалу и множество других вещей. Типовые элементы вроде заголовка, навигации, контента, контактной информации надо разместить на одной странице, в совокупности это и называется её макетом. Таким образом, макет это способ организации материалов на веб-странице. Самих макетов существует огромное количество, но их, тем не менее, можно систематизировать по ряду признаков, например, по ширине, по количеству колонок, по расположению элементов, по устройствам на которые они ориентированы и др. Наиболее популярным является деление макетов по ширине и количеству колонок, которые и рассмотрим далее.
Макеты по ширине
Различают пять типов макетов, связанных с шириной:
фиксированные;
резиновые;
эластичные;
адаптивные; 
комбинированные.
Фиксированный макет
Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.
Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис. 6.1).
Рис. 6.1. Фиксированный макет в браузере
Преимущества
Из-за того, что ширина всех колонок известна, проще указывать размеры изображений, видео и других элементов страницы.
Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.
Недостатки
Сайт смотрится плохо на мониторах с высоким разрешением, неэффективно используя свободное место. Некоторые владельцы таких мониторов даже уменьшают окно браузера по ширине, чтобы скрыть пустое место слева и справа от макета.
Сайты
http://bash.org.ru
http://www.youtube.com 
http://vkontakte.ru
Резиновый макет
Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.
Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис. 6.2).
Рис. 6.2. Резиновый макет в браузере
Преимущества
Используется вся эффективная область страницы.
Веб-страницы удобно печатаются на бумаге любого формата.
Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.
Недостатки
На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-width. Опять же некоторые владельцы больших мониторов уменьшают окно браузера до комфортных для них размеров.
Резиновые макеты сложнее верстать и отлаживать в разных браузерах.
Сайты
http://lenta.ru
http://yandex.ru 
http://rutracker.org
Эластичный макет
Этот макет по своему виду может не отличаться от фиксированного или резинового макета. До тех пор, пока вы не измените размер шрифта в браузере, тогда вы заметите, что размер поменяли и элементы веб-страницы. Размер элементов задаётся не в пикселах и процентах, а в em, привязанному к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.
Преимущества
Макет целиком или отдельные его части легко масштабировать, подгоняя под комфортный для восприятия размер.
Макет будет одинаково смотреться на разных операционных системах, имеющих различия в выборе размера и типа шрифта.
Недостатки
В современных браузерах функция масштаба страницы уже встроена, и пользоваться ей довольно удобно.
Верстать эластичный макет крайне сложно, поскольку единица em имеет относительные размеры и зависит от используемого шрифта.
В действительности сфера применения этого макета очень ограниченна.
Сайт 
http://www.csszengarden.com/?cssfile=http://green-beast.com/portfolio/zen/css/zen.css
Адаптивный макет
Этот макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Для этого заготавливается несколько стилевых файлов под разный диапазон разрешений, выбор файла происходит через скрипты, которые и определяют нужную для этого информацию о пользователе.
Преимущества
Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.
Макет комфортно можно смотреть на любом устройстве.
Недостатки
Это самый сложный тип из всех макетов, ведь, по сути, вместо одного требуется сделать несколько макетов со своей графикой и CSS, а также написать скрипт для определения разрешения монитора или ширины окна браузера.
За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.
Сайт
Вид сайта http://www.w3.org показан на рис. 6.3. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис. 6.4).
Рис. 6.3. Сайт W3C при обычной ширине
Рис. 6.4. Сайт W3C при узкой ширине
Комбинированный макет
Альтернативные названия: гибрид, hybrid (англ.).
Этот макет предполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным (рис. 6.3).
Рис. 6.5. Комбинированный макет
Этот макет в действительности не является самостоятельным типом, поэтому наследует все плюсы и минусы фиксированного и резинового макета.
Надо отметить, что некоторые макеты, хотя и выглядят комбинированными, в действительности ими не являются. Резиновая шапка страницы может оказаться всего-навсего широким фоновым рисунком.
Сайт 
http://lionindesert.ru
Макеты по колонкам
Колонки в веб-дизайн пришли из полиграфии, где они используются в качестве способа разбивки широкого текста на более узкие фрагменты, а также для разделения различной информации. На сайтах текст всегда идёт одной колонкой, потому что универсальных способов для создания многоколоночного текста пока не существует. Кроме того, сайт по своей структуре и виду отличается от страницы в журнале, которую можно охватить одним взглядом, это тоже накладывает свои ограничения на распространение многоколоночного текста. Возможно в недалёком будущем сайты, специально «заточенные» под iPad и другие планшеты, станут активно применять колонки по своему прямому назначению. Пока же колонки преимущественно применяются для смыслового деления материала. Например, одна колонка содержит контент, другая навигацию, а третья рекламный баннер и т.д.
Наиболее распространенным вариантом является наличие на веб-странице двух колонок — одна из них, как правило, содержит навигацию, а во второй, более широкой колонке, размещается контент. Для резиновых макетов имеет смысл установить три колонки, чтобы эффективно использовать полезную площадь веб-страницы. В любом случае выбор числа колонок зависит исключительно от объема информации на сайте и способе её организации.