Нижеследующий пример наглядно демонстрирует, каким образом можно законными и не слишком мудреными методами реализовать на веб-странице полноценный блок с полями и рамкой, имеющий постоянные линейные размеры в пикселях во всех сколько-либо распространенных сегодня графических браузерах.
Идея заключается в том, что рамку и пустые поля можно сымитировать при помощи наложенных друг на друга слоев с нулевыми значениями параметров padding и border-width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Завидное постоянство</title>
<style type="text/css">
<!--
html, body {margin: 0px; padding: 0px; width: 100%; height: 100%}
body {color: #000; background-color: #fff}
div {position: absolute; overflow: hidden; border: none; margin: 0px; padding: 0px}
#block-border {top: 61px; left: 61px; width: 200px; height: 200px; background-color: #6c9}
#block-padding {top: 64px; left: 64px; width: 194px; height: 194px; background-color: #ccfff0}
#block-content {top: 84px; left: 84px; width: 154px; height: 154px; font-size: 80%; text-align: justify}
-->
</style>
</head>
<body>
<div id="block-border"> </div>
<div id="block-padding"> </div>
<div id="block-content">Эта область имеет размеры 200×200 пикселей с учетом полей и рамки. И так будет всегда. Несмотря на все происки врагов.</div>
</body>
</html>
Недостатков у подобного подхода как минимум три.
Во-первых, логика документа страдает из-за наличия слоев, не содержащих полезной информации. Это чем-то похоже на вложенные таблицы, с той лишь маленькой разницей, что наша страница ни в чем не противоречит стандарту HTML 4.01 Strict.
Во-вторых, рамку такого вот «тройного тулупа» нельзя сделать пунктирной, точечной, двойной (хотя нет, двойной — пожалуйста, но только тулуп при этом перестанет быть тройным :-)), поскольку свойство border-style для нее по понятным соображениям неприменимо.
Наконец, в-третьих, содержимое такого блока проблематично сделать прокручивающимся при помощи наделения свойства overflow значением scroll. То есть, нет, с самой прокруткой-то как раз никаких особенных проблем не возникает — все дело только в том, что скроллбары при этом будут вплотную прилегать к тексту.
Разумеется, описанный выше способ преодоления несовместимостей — не единственный. Практикующие веб-разработчики могут поделиться изрядным количеством разнообразных хитростей разного уровня сложности, но, так или иначе, замысловатость и запутанность — это вынужденные меры переходного периода, не самым лучшим образом сказывающиеся на логической стройности кода. Но пока они реально помогают жить.
© Артемий Ломов, 2004, 2005.