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

  1. <html>
  2. <script type=“text/javascript”>
  3. window.onload = function(){
  4. alert(“Body个数是:”+document.getElementsByTagName(“body”).length);
  5. }
  6. </script>
  7. </html>

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

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

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

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

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

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

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <style type=“text/css”>
  5. html {background:#CCFFFF;border:1px solid green;}
  6. body {border:1px solid red;width:500px;margin:0 auto;background:#FFFFCC;}
  7. </style>
  8. </head>
  9. <body>
  10. HTML加了背景
  11. </body>
  12. </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还公用滚动条?

转自:xhlv童鞋