正如 SpliFF 已经提到的，问题是因为默认 (W3C) box model 是“内容框”，这导致边界在 width 和 height 之外。但是您希望它们在您指定的 100% 宽度和高度内。一种解决方法是选择边框框模型，但在 IE 6 和 7 中，如果不恢复到 quirks 模式，则无法这样做。
另一种解决方案也适用于 IE 7。只需将html 和body 设置为100% 高度，将overflow 设置为hidden 即可摆脱窗口的滚动条。然后你需要插入一个绝对定位的包装 div 来获取红色边框和所有内容，将所有四个 box offset properties 设置为 0 （因此边框贴在视口的边缘）和 overflow 设置为 auto （将滚动条放在包装器 div 中）。
只有一个缺点：IE 6 不支持同时设置left 和 right 和top 和 bottom。唯一的解决方法是使用CSS expressions（在条件注释中）将包装器的宽度和高度显式设置为视口的大小，减去边框的宽度。
为了更容易看到效果，在下面的例子中我将边框宽度放大到了 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 表达式模拟固定定位（右侧和底部 div 出现问题），但无论如何它看起来很可怕，因为这些表达式是 very expensive 并且渲染速度非常慢。
<!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>