Tag Archive for 'html'

body标签到底是个啥?

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

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

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

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

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

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

四、在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和Chorme(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还公用滚动条?