61,112
社区成员
发帖
与我相关
我的任务
分享关于 IE 中 body 的 overflow: hidden 的 fix
今天工作中实际碰到的问题。我写在这里了：
http://www.cnblogs.com/rchen/archive/2005/02/22/107426.html
最终的文档是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Roger Chen">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
html {/*Browser Hack proposed by Tantek Celik to correct IE5 box model misinterpretation*/
overflow: hidden; height: 100%; margin: 0; padding: 0;}
body {height: 99%; margin: 0; border: 0; padding: .5%; overflow: hidden;}
#test {overflow: hidden;}
#test {width: 300px; height: 100px; margin: auto; border: 1px solid green;}
</style>
</head>
<body>
a<br/>a<br/>
<div id="test">this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/></div>
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
</body>
</html>
从这个可以看到在兼容标准的模式下，IE 中仅仅是 body 元素有 bug. 归根到底是 IE 对盒模型解释错误的表现之一．
http://www.cnblogs.com/rchen/archive/2005/02/22/107426.html
最终的文档是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Roger Chen">
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
html {/*Browser Hack proposed by Tantek Celik to correct IE5 box model misinterpretation*/
overflow: hidden; height: 100%; margin: 0; padding: 0;}
body {height: 99%; margin: 0; border: 0; padding: .5%; overflow: hidden;}
#test {overflow: hidden;}
#test {width: 300px; height: 100px; margin: auto; border: 1px solid green;}
</style>
</head>
<body>
a<br/>a<br/>
<div id="test">this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/>this is a test.<br/></div>
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
</body>
</html>
从这个可以看到在兼容标准的模式下，IE 中仅仅是 body 元素有 bug. 归根到底是 IE 对盒模型解释错误的表现之一．
...全文
请发表友善的回复…
发表回复
dsclub 2005-02-28
- 打赏
- 举报
就是居中么?
body{
text-align:center;
}
#something{
width:300px;
height:120px;
margin-right:auto;
margin-left:auto;
}
这样在FireFox和IE下都兼容的吧
body{
text-align:center;
}
#something{
width:300px;
height:120px;
margin-right:auto;
margin-left:auto;
}
这样在FireFox和IE下都兼容的吧
潜水的鱼 2005-02-28
- 打赏
- 举报
大部份人都用DW + table
个人认为是由市场决定的， 因为不是每个网站都是门户网站；没有那么多的钱去烧；
个人认为是由市场决定的， 因为不是每个网站都是门户网站；没有那么多的钱去烧；
潜水的鱼 2005-02-28
- 打赏
- 举报
楼上， 也太小瞧人了吧， DW生成 css 代码也是不错的；
Minisheep 2005-02-27
- 打赏
- 举报
因为大部分人都是在dreamweaver里用table排版的，估计连CSS是什么他们也不知道，更不用说overflow是干什么的。所以IE有什么BUG当然也不会关心了。
meizz 2005-02-26
- 打赏
- 举报
哟, 兄弟, 你还单独开贴啦?
xxrl 2005-02-26
- 打赏
- 举报
：））））））））））
潜水的鱼 2005-02-26
- 打赏
- 举报
^_^
nchen123 2005-02-26
- 打赏
- 举报
呵呵, 发帖玩玩。 好久没在这里发帖了阿
不过好像关心的人很少 :(
不过好像关心的人很少 :(
nchen123 2005-02-22
- 打赏
- 举报
刚才我发现这个道理同样可以解决 body 里放一个高为 100% 的表格不能充满页面的问题。
类似这样的：
<table height="100%" bgcolor="green">
<tr>
<td>test</td>
</tr>
</table>
修正的方法完全一样。
类似这样的：
<table height="100%" bgcolor="green">
<tr>
<td>test</td>
</tr>
</table>
修正的方法完全一样。
Minisheep 2005-02-22
- 打赏
- 举报
IE嘛，BUG多的是，多一个少一个又不算什么。
感觉代码越乱，IE越能理解。代码规范一点，IE就出错
感觉代码越乱，IE越能理解。代码规范一点，IE就出错
