Как уже упоминалось в SpliFF, проблема заключается в том, что по умолчанию (W3C) блочная модель имеет значение 'content-box', в результате чего границы выходят за пределы width и height. Но вы хотите, чтобы они были в пределах 100% ширины и высоты, которые вы указали. Одним из обходных путей является выбор модели рамки с рамкой, но вы не можете сделать это в IE 6 и 7 без возврата в режим причуд.
Другое решение работает и в IE 7. Просто установите html и body на 100% высоты и overflow на hidden, чтобы избавиться от полос прокрутки окна. Затем вам нужно вставить абсолютно позиционированный div-обертку, который получает красную рамку и все содержимое, установив для всех четырех свойств смещения поля значение 0 (таким образом, граница прилипает к краям области просмотра) и overflow до auto (чтобы поместить полосы прокрутки внутри div-оболочки).
Есть только один недостаток: IE 6 не поддерживает настройку left и right, а также top и bottom. Единственный обходной путь для этого - использовать CSS-выражения (в условном комментарии), чтобы явно установить ширину и высоту оболочки в соответствии с размерами области просмотра за вычетом ширины границы.
Чтобы было легче увидеть эффект, в следующем примере я увеличил ширину границы до 5 пикселей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
P.S .: Я только что видел, что тебе не нравится overflow: hidden, хммм ...
Обновление: Мне удалось обойти, используя overflow: hidden, подделав границу, используя четыре элемента div, которые прилипают к краям области просмотра (вы не можете просто наложить весь область просмотра на полноразмерный div, так как все элементы ниже не будут доступны). Это не очень хорошее решение, но, по крайней мере, обычные полосы прокрутки остаются в исходном положении. Мне не удалось позволить IE 6 имитировать фиксированное позиционирование с помощью выражений CSS (возникли проблемы с правым и нижним делителями), но в любом случае это выглядело ужасно, поскольку эти выражения очень дороги , а рендеринг стал утомительно медленным.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#border-t, #border-b, #border-l, #border-r {
position: fixed;
background: red;
z-index: 9999;
}
#border-t {
left: 0;
right: 0;
top: 0;
height: 5px;
}
#border-b {
left: 0;
right: 0;
bottom: 0;
height: 5px;
}
#border-l {
left: 0;
top: 0;
bottom: 0;
width: 5px;
}
#border-r {
right: 0;
top: 0;
bottom: 0;
width: 5px;
}
</style>
</head>
<body>
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
<div id="border-t"></div><div id="border-b"></div>
<div id="border-l"></div><div id="border-r"></div>
</body>
</html>