Почти стандартный режим

Влад Мержевич

Цей режим базується на стандартному режимі з деякими винятками: відображення зображень всередині комірок таблиці і рисунків один під одним відбувається так, як у режимі сумісності. Для перемикання в майже стандартний режим застосовується один з наступних доктайпів.

Для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Для фреймів в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Для фреймів в XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">

Зображення одне під одним

При виведенні зображень вертикально з переносом рядка через <br> картинки в майже стандартному режимі виводяться об'єднано без проміжків. У прикладі 1 показаний код для виводу двох зображень.

Приклад 1. Виведення двох зображень

HTML 4.01IECrOpSaFx

<!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=utf-8">
  <title>Зображення вертикально</title>
 </head>
 <body>
  <p class="img"><img src="images/ecctitle.png" alt="Назва" 
    width="640" height="158"><br>
   <img src="images/navigate.png" alt="Навігація" width="640" height="30"></p>
 </body>
</html>

Оскільки малюнки передбачено було одним і "розрізані" для зручності, вони утворюють єдине зображення (рис. 1).

У стандартному режимі між зображеннями утворюється невеликий проміжок (рис. 2).

Для обходу цієї особливості в стандартному режимі існує два основних способи:

  1. додати display: block для зображень;
  2. використовувати властивість line-height для батьківського контейнера.

Розглянемо ці способи докладніше.

Перетворення тега <img> в блочний елемент ще не раз допоможе нам для обходу різних неприємностей, пов'язаних з зображеннями. У цей раз використаємо ту особливість, що блочні елементи вирівнюються один під одним об'єднано (відступи у розрахунок не беремо). При цьому тег <br> з коду, звісно ж, слід видалити (приклад 2).

Приклад 2. Використання властивості block

XHTML 1.0CSS 2.1IECrOpSaFx

<!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">
   DIV.img IMG { display: block; }
  </style>
 </head>
 <body>
  <div class="img"><img src="images/ecctitle.png"  alt="Назва" 
    width="640" height="158" />
   <img src="images/navigate.png"  alt="Навігація"  width="640" height="30" /></div>
 </body>
</html>

Не обов'язково використовувати властивість block, також можна скористатися line-height, ця властивість задає міжрядковий інтервал. Встановивши значення 1px для тегу <p>, всередині якого розташовуються зображення, ми отримаємо аналогічний результат (приклад 3).

Приклад 3. Використання властивості line-height

XHTML 1.0CSS 2.1IECrOpSaFx

<!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.img { line-height: 1px; }
  </style>
</head>
<body>
  <p class="img"><img src="images/ecctitle.png" alt="Назва" 
   width="640" height="158" /><br />
   <img src="images/navigate.png" alt="Навігація" width="640" height="30" /></p>
</body>
</html>

Зображення в таблиці

При додаванні зображення в комірку таблиці також проявляється різниця між режимами браузера. Для розуміння розглянемо наступний код (приклад 4). Щоб стала помітна межа навколо таблиці, у стилях додано властивість border для селектора TABLE.

Приклад 4. Зображення в таблиці

HTML 4.01CSS 2.1IECrOpSaFx

<!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=utf-8">
 <title>Зображення в таблиці</title>
  <style type="text/css">
   TABLE { border: 1px solid #000; }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr><td>
    <img src="images/figure.jpg" alt="Вінні-Пух" width="111" height="110">
   </td></tr>
  </table>
 </body>
</html>

Результат цього прикладу показаний на рис. 3а. Для стандартного режиму вивід зображення трохи відрізняється (рис. 3б).

Майже стандартний режимСтандартний режим
аб

Рис. 3. Зображення в таблиці. а — майже стандартний режим, б — стандартний режим

Зауважно, що в стандартному режимі з'являється невеликий відступ знизу зображення. Звідки він береться? Якщо додати в комірку текст і збільшити масштаб (рис. 4), то добре помітно, що зображення як вбудований елемент вирівнюється за базовою лінією тексту, а не за його нижнім краєм. Відповідно, різниця між базовою лінією і нижнім краєм тексту і є значення проміжку знизу зображення.

І знову ж, існує кілька способів змінити поведінку зображень в таблиці. Перший спосіб вже згадувався, це перетворення тега <img> в блочний елемент за допомогою властивості display зі значенням block. Стиль у такому випадку буде наступним:

TABLE IMG { display: block; }

Якщо поряд з зображеннями всередині комірки знаходиться текст, цей стиль може призвести до небажаних наслідків. Замість того щоб картинка розташовувалась поруч з текстом, вона, як блочний елемент, з'явиться на новому рядку. У цьому випадку рекомендується задати вирівнювання зображень за нижнім краєм через властивість vertical-align зі значенням bottom.

Часті запитання