Tom*_*lak 21 html css internet-explorer
好吧,这让我疯狂了.
我希望在我的文档周围有一个边框.它应该很好地围绕整个窗口/视口.所以我定义:
body {
border: 1px solid red;
}
当我的文档处于怪癖模式时,这很好.至少在IE中,这是我的主要目标.红色边框显示在我页面的边缘,显然是因为通过预定义的CSS body并html设置为填充屏幕.
通过设置HTML 4.01严格DOCTYPE进入标准模式,body并html折叠到内容的实际(较小)大小时,边框将直接绘制在屏幕中间.所以我定义:
body, html {
padding: 0px;
margin: 0px;
border: 0px none;
width: 100%;
height: 100%;
}
body {
border: 1px solid red;
}
我得到 - 滚动条,滚动一个像素来显示底部/右边框.但是,我希望这个边界立即可见.
有没有废话(如"高度:99.9%;","溢出:隐藏;"或"切换回怪癖模式")方法获得100%的边框,没有不必要的滚动条？IE-only很好,当然,跨浏览器会更好.
Mar*_*pel 13
正如SpliFF已经提到的那样,问题是因为默认(W3C)盒子模型是'content-box',这导致边框在widthand和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>
PS:我刚看到你不喜欢overflow: hidden,嗯......
更新:我设法overflow: hidden通过使用粘贴在视口边缘的四个div来伪装边框(你不能只用一个全尺寸的div覆盖整个视口,因为它下面的所有元素都无法访问更多).这不是一个很好的解决方案,但至少正常的滚动条保持原来的位置.我无法让IE 6使用CSS表达式模拟固定定位(右侧和底部div的问题),但它看起来很可怕,因为这些表达式非常昂贵并且渲染变得非常慢.
<!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>
你会喜欢这个.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-row;
}
#wrapper {
display: table-cell;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
http://www.test.dev.arc.net.au/100-percent-border.html
我认为,即使在标准模式下,表格也会保持很多"古怪"的行为,因此它们可能是解决方案.将HTML元素转换为表格非常有趣.
在将此标记为无法在IE6中工作之前,请考虑这是一个非常简单的问题.关键是使用表绘制算法是解决方案,也可以使用纯CSS解决方案:
<table class="outer"><tr><td class="inner"> ...page content...