body标签到底是个啥？(转)

jqj031

浏览: 73469 次
性别:
来自: 苏州

最近访客更多访客>>

wudingyou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

IE 浏览器 HTML Chrome Safari

和head一样，如果页面没有这个标签，浏览器会自动加上去

<html>
<script type=“text/javascript”>
window.onload = function(){
alert(“Body个数是：”+document.getElementsByTagName(“body”).length);
}
</script>
</html>

那么当页面中出现好几个body，浏览器又会怎么处理呢？
只会保留第一对出现的body，其他的都会删掉，但其他body里的内容仍然会保留，你也可以自己去测试一下，比较有意思。

body在各浏览器中都非常诡异，尤其是IE，问题多多。body除了像其他标签一样可以加class加id加事件，还有一些特性的性质，也可称之为bug。

一、IE中body默认的margin值为”15px 10px 15px 10px”，非IE的浏览器默认值为”8px 8px 8px 8px”。

二、body在默认情况下，背景色会突破border，不是它该占有的区域也会有它的背景。

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<style type=“text/css”>
html {border:1px solid green;}
body {border:1px solid red;background:#FFFFCC;}
</style>
</head>
<body>
A
</body>
</html>

三、如果给html一个背景，body的背景就会回到正常的区域，不再冲破border（你也可以发现html的背景也冲破了它自己的border）。可以利用这个性质，把body当成普通的标签来用，这样有时就能节省”wrap”之类的外包标签。可以给body宽度/高度，加背景，让它水平垂直居中等，都是可以做到的。

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<style type=“text/css”>
html {background:#CCFFFF;border:1px solid green;}
body {border:1px solid red;width:500px;margin:0 auto;background:#FFFFCC;}
</style>
</head>
<body>
HTML加了背景
</body>
</html>

四、在IE中，如果给html和body都加上背景，如果给body设置”width:500px;margin:0 auto;”，你会发现body中的position值为relative的元素在你改变浏览器窗口大小时，并不会随着body移动（其他浏览器正常），刷新一下才会跑过去。解决这个问题需要给body也加上position:relative，为什么这样就不知道了，或许可这样回答：“因为这是IE！”。

五、IE中body的默认z-index值为“0”，而其他浏览器为“auto”。这个还不能怪body，因为IE给所有标签的z-index默认值都是0，而其他浏览器都是给auto，除了Safari和Chrome（html为0，其他标签为auto）。

六、IE中光给body“overflow:hidden”是隐藏不了滚动条的，其他浏览器可以。这个貌似是body搞的鬼，事实上不是body的错，IE默认给了html“overflow:scroll”，其他浏览器都给visible，所以在IE中想要屏蔽滚动条的话，需要给html加上“oveflow:hidden”。

七、如果把html和body的overflow都设为visible，那么在IE就不会有滚动条，算正常的。但其他浏览器中，还是有滚动条，把其中任意一个改成hidden都会屏蔽滚动条，难道html和body还公用滚动条？

分享到：