最近在页面中使用padding控制div的样式时,其中一个页面无论怎么修改padding都不能起到应有的作用,代码如下:
<div style="width:300px;height:300px;padding:10 10 10 10;border:1px solid #000;">
<div style="border:1px solid #CC5500;">测试信息</div>
</div>
和其他页面比较,代码几乎没有差别,但是还是有一点不起眼的差异,那就是两个文件开头的doctype声明不一样:
出现效果的页面的doctype是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,
而另外一个:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
将后者改为和前者一致时,就出现了需要的效果。
页面上的doctype声明往往容易被忽视,但在遵循标准的任何web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的web文档。 doctype的作用doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是w3c所发布的一个文档类型定义(dtd)中包含的规则。 每个dtd都包括一系列标记、attributes和properties,它们用于标记web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准(比如html 4 frameset和xhtml 1.0 transitional)都有自己的dtd。 假如文档中的标记不遵循doctype声明所指定的dtd,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。对于标记不一致的问题,浏览器相较于校验器来说更宽容。但是,不正确的doctype声明经常导致网页不正确显示,或者导致它们根本不能显示。
代码中的“padding:10 10 10 10”其实是一种不正确的写法,将其改为“padding:10px 10px 10px 10px”就不会存在由于doctype不同而导致样式不起作用的问题了。