|
Nickolay.info. Тексты. Маленькие секреты HTML и CSS |
Подобных "секретов" по Сети - великое множество. Сюда я добавляю только свои небольшие "открытия", сделанные при работе с вёрсткой сайтов.
1. Internet Explorer и картинка с шириной, заданной в процентах, в ячейке таблицы
2. Прозрачность картинки в процентах для всех браузеров
3. "Лишние" отступы вокруг форм
4. "Удваивание" рамок в таблицах и применение стиля к внутренним ячейкам
5. "Непонятный отступ" снизу картинки, находящейся в блоке или ячейке
6. "Скачущий" в ширину макет из-за автоматического убирания полосы прокрутки
Новые "секреты" будут добавляться в оглавление раздела
Если картинка внутри ячейки таблицы больше, чем сама ячейка, альтернативные браузеры нормально отмасштабируют её кодом вроде
<table width="100%">
<tr><td><img src="image.jpg" width="100%"></td></tr>
</table>
однако, в IE6 - IE8 всё разъедется. Помогает стилевое указание вида
<style type="text/css">
TABLE {table-layout: fixed;}
</style>
filter: alpha(opacity=50); /* IE 5.5 и выше */ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1 и выше, Safari 1.1 и выше */ opacity: 0.5; /* Браузеры с CSS3 - Mozilla 1.7b и выше, Firefox 0.9 и выше */
Только перечисление в стиле всех указанных выше директив более-менее гарантирует, что картинка действительно будет полупрозрачной в разных браузерах. Разумеется, можно создать отдельный класс с этими директивами.
<style type="text/css">
.oppa {
margin:0px;
filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;
}
</style>
<img class="oppa" src="lamp.gif" width="64" height="64" alt="Лампочка Ильича">
Для многих блочных объектов, особенно форм, полезно всегда указывать в стиле нулевой отступ margin:
FORM { margin: 0; }
Мой традиционный рецепт. Часто при разметке таблиц с помощью стилей во-первых, стилем отображаются только внешние рамки таблицы, а внутренние нет, во-вторых, внутренние рамки "удваиваются":
<style type="text/css">
.tab1 {
border: 1px solid blue;
}
</style>
<table width=100% cellpadding=4 cellspacing=0 border=1 class="tab1"><tr><td>
<p>Содержимое ячейки</p>
</td></tr>
<tr><td>Ещё ячейка</td></tr>
</table>
|
Содержимое ячейки |
| Ещё ячейка |
Во-первых, применить правила CSS нужно как к тегу <table>, так и к <td> и <th>.
Во-вторых, избежать удваивания рамок позволяет включение в класс таблицы директивы
border-collapse: collapse;
<style type="text/css">
.tab1 {
border: 1px solid blue;
border-collapse: collapse;
}
</style>
<table width=100% cellpadding=4 cellspacing=0 border=1 class="tab1"><tr><td class="tab1">
<p>Содержимое ячейки</p>
</td></tr>
<tr><td class="tab1">Ещё ячейка</td></tr>
</table>
|
Содержимое ячейки |
| Ещё ячейка |
Помогал знакомой сделать несложный макет сайта, вот и провозился битый час с описанной ниже фичей... итак, пишем простой файл HTML, в котором есть строки таблиц, содержащих только картинки.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Таблица только из картинок</title> </head> <body> <table width="90%" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <img src="1.gif" width="100%" height="16" style="margin:0px;" alt=""> </td> </tr><tr> <td> <img src="2.gif" width="100%" height="16" style="margin:0px;" alt=""> </td> </tr> </table> </body></html>
Сами картинки могут быть любыми, здесь вот эти для примера:
Этот код корректен, то есть, проходит валидацию на http://validator.w3.org/ для спецификации HTML 4.01 Strict.
Тем не менее, IE7, IE8, Firefox 3.5.9 И Opera 10.51 покажут вот что:
Opera 10.0 и Firefox 3.0 покажут следующее:
- что мы, вообще-то, вправе ожидать "по умолчанию".
Указание hspace="0" vspace="0" в теге <img> ничего не даст, кроме предупреждений валидатора о некорректных
атрибутах. Ничего не даст и выставление в 0 всевозможных отступов margin и padding.
В инете для этой ситуации встречаются разные советы - например, паковать весь код документа в одну строку - что очень "удобно" и не имеет оснований в спецификации.
Для исправления ситуации достаточно поместить в стиль документа указание
td img { display:block; }
то есть, изменённый документ выглядит теперь так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица только из картинок</title>
<style type="text/css">
<!--
td img { display:block; }
-->
</style>
</head>
<body>
<table width="90%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src="1.gif" width="100%" height="16" style="margin:0px;" alt="">
</td>
</tr><tr>
<td>
<img src="2.gif" width="100%" height="16" style="margin:0px;" alt="">
</td>
</tr>
</table>
</body></html>
и показывается всеми браузерами нормально, то есть, в варианте 2. По-прежнему проходит валидацию.
Вот что пишут о display: block;
Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести себя подобно блокам — происходит перенос строк в начале и в конце содержимого.
Описанное выше "нехорошее" поведение браузеров будет только при указании спецификации
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ну или там
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
а для
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
оба варианта кода нормально выглядит во всех браузерах.
Если сделать документ совсем без спецификации, то есть, начать прямо с тега <html>, как чаще всего и поступают, ситуация немного изменится - то есть, IE 7 и 8 покажут правильно только второй вариант кода, с добавленным
стилевым определением display: block;, а последние версии Opera и Mozilla Firefox нормально покажут оба варианта кода.
Вывод - спецификация HTML - это не "просто строчка". Либо пишите её осознанно, либо не пишите вовсе, но тогда будьте готовы к необходимости всяких "хитрых решений", которые могли бы обеспечить кроссбраузерную совместимость.
IE по умолчанию всегда отображает справа на текущей странице полосу прокрутки, которая может быть активна или нет, Opera и Firefox эту полосу не отображают, если страница не достигает в высоту одного экрана.
При "резиновой" вёрстке, неважно, сложной или простой, даже такой вот макет -
<html><head> <title>Страница 1</title> </head> <body> <table width="100%" height="100%" border="1" align="center" cellpadding="4" cellspacing="0"> <tr> <td valign="top"> Содержимое </td> </tr> </table> </body></html>
будет в Опере и Firefox "скакать" по ширине при переходе от страниц, не имеющих вертикальной прокрутки к страницам, которые её имеют. Похоже, простейший путь избежать этого - включать полосы всегда. Для этого достаточно поставить в стиле указание
body {
overflow: scroll;
}
Сработало во всех основных браузерах.
 гостевая; E-mail
|