§ ITPOW >> 文档 >> CSS

DOCTYPE 也影响 IE 6 的 CSS 解释

作者:vkvi 来源:ITPOW(原创) 日期:2009-12-22

以 width 是否包含 border 为例,如果我们不指定 DOCTYPE,那么 width 是包含 border 的。

<div style="width:100px;height:100px;background-color:green;"></div>
<div style="width:100px;height:100px;border:1px solid red;"></div>
<div style="float:left;width:100px;height:100px;border:1px solid blue;"></div>
<div style="width:100px;height:100px;background-color:green;"></div>

可以看出:第一个块和第二个块宽度相同,第三个块和第四个块高度相同。

如果我们加上 DOCTYPE 为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

此时可以发现带 border 的要宽些、高些了。

使用了这个 DOCTYPE 后,IE 6 仍然可以认识到 _width、_height,但我们要注意到,不能用这种方法来 hack 了,因为 IE 6 的解释是标准的解释了。

同样,指定了上述 DOCTYPE 后,padding 也不再包含在 width、height 中了。

仍然要说明,加了这个 DOCTYPE 后,IE 6 并不会把所有的 CSS 来按标准来解释,它只是对部分进行标准解释。

相关文章