调试了很久，发现了一个非常细微但又十分重要的问题，又一次我在对于文档声明类型的时候，声明了如下类型

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

　　然后，我在body里面写了两个div，并且定义了宽度和高度均为80px，padding上下左右均为20px，那么显然，对于w3c标准的话，整个盒子的外部大小应该是120*120px，

　　但是在IE下，我们发现宽度和高度是80*80px

　　IE下，我们可以发现，对于元素的宽度，他其实定义的是元素的内容宽度，所以显示的是80*80px

　　后来，

　　我修改了html文档声明：<!DOCTYPE html>

　　由于IE的宽度不仅仅包含了内容宽度，而且还包含了padding，其实IE这种表达方式更为科学，但由于历史和市场的发展，chrome，firefox等主流浏览器都以w3c为标准，而导致了元素在不同浏览器下的显示兼容问题

更改了文档声明之后，发现，此时的IE的宽度，和chrome一样，是不包含padding的，再加上padding以后，其宽度和高度就变为120X120，如图：

　　所以，我们在写html标签的时候，首要关键是要检查好文档声明类型，否则，在我们后期的兼容性调试的过程中，将会非常的费力且麻烦，由于我们的浏览器接收从服务器端发送过来的文档中，根据文档声明而进行解析，如果遇到了<!DOCTYPE html>，则表示我们的浏览器需对当前的文档以W3C的标准进行解析，所以这个声明是至关重要的

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/inside.css" />
</head>
<body>
　　<div class="main">

　　</div>
　　<div class="main">

　　</div>

</body>

</html>

.main{
　　　　background-color: #a847c3;
　　　　width: 80px;
　　　　height: 80px;
　　　　padding: 20px 20px;
　　　　border: 1px solid #2C2C2C;
　　　　float: left;
}

为什么要加入<!doctype html>这个文档声明——IE怪异模式的更多相关文章

  1. 为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式?

    不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式,然而使用了 DOCTYPE,也不一定就能够使文档在所有浏览器中均处于标准模式. DOCTYPE 本身不就是一个“开关”吗?为何在有 DOC ...

  2. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?

    文档声明的作用: 文档声明是为了告诉浏览器,当前HTML文档使用什么版本的HTML来写的,这样浏览器才能按照声明的版本来正确的解析. <!doctype html> 的作用就是让浏览器进入 ...

  3. HTML文档声明

    前面的话   HTML文档通常以类型声明开始,该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型.本文将详细介绍文档声明DOCTYPE 特点   文档声明必须是HTML文档的第一行.且顶格显示, ...

  4. HTML（一）HTML基础语法（HTML简介，HTML文档声明）

    HTML 概念介绍 [概念] (Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言 超文本(Hyper Text):不只包括文本,也可以包括图片.链接.音乐 ...

  5. Html5新特性之文档声明和头部信息

    Html5推出的新内容比较多,本文我们来介绍两个重点内容,文档类型声明和头部信息. 无论是Html4.01还是XHtml1.0,所有文档的开头都会有文档声明<!DOCTYPE>标签来声明它 ...

  6. 课时14.DTD文档声明上（掌握）

    1.什么是DTD文档声明? 由于HTML有很多格版本的规范,每个版本的规范之间又又一些差异,所以为了让浏览器能够正确的编译/解析/渲染我们的网页,我们需要在HTML文件的第一行告诉浏览器,我们当前这个 ...

  7. 文档声明和HTML样式表

    文档声明 不是注释也不是元素,总是在HTML的第一行 书写格式:<!DOCTYPE HTML> 是用于通知浏览器目前文档正使用哪一个HTML版本(相关属性 lang) 若不写文档声明,浏览 ...

  8. HTML5入门：HTML5的文档声明和基本代码

    HTML5的文档声明: HTML5的文档声明,不同于HTML4.0和XHTML,它精简了许多代码,只保留<!DOCTYPE html>开头,必须位于HTML5文档的第一行,它可以用来告诉浏 ...

  9. HTML&CSS基础-文档声明

    HTML&CSS基础-文档声明 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML的发展 1993年6月: HTML第一个版本 1995年11月: HTML2.0 ...

随机推荐

  1. linux基础-第八单元 正文处理命令及tar命令

    第八单元 正文处理命令及tar命令 使用cat命令进行文件的纵向合并 两种文件的纵向合并方法 归档文件和归档技术 归档的目的 什么是归档 tar命令的功能 tar命令的常用选项 使用tar命令创建.查 ...

  2. php魔术方法罗列

    ##__sleep() 和 __wakeup() 当序列化(serialize)对象时,PHP 将试图在序列动作之前调用该对象的成员函数 __sleep() .__sleep() 方法常用于提交未提交 ...

  3. ab 性能测试工具的使用（Web并发测试）

    1.下载 http://pan.baidu.com/s/1hrlAbI0 2.命令介绍 参数的介绍 n在测试会话中所执行的请求个数.默认时,仅执行一个请求. -c一次产生的请求个数.默认是一次一个. ...

  4. Codeforces Round #286 Div.1 A Mr. Kitayuta, the Treasure Hunter --DP

    题意:0~30000有30001个地方,每个地方有一个或多个金币,第一步走到了d,步长为d,以后走的步长可以是上次步长+1,-1或不变,走到某个地方可以收集那个地方的财富,现在问走出去(>300 ...

  5. UVA 11800 Determine the Shape --凸包第一题

    题意: 给四个点,判断四边形的形状.可能是正方形,矩形,菱形,平行四边形,梯形或普通四边形. 解法: 开始还在纠结怎么将四个点按序排好,如果直接处理的话,有点麻烦,原来凸包就可搞,直接求个凸包,然后点 ...

  6. 洛谷10月月赛Round.1| P3400 仓鼠窝[单调栈]

    题目描述 萌萌哒的Created equal是一只小仓鼠,小仓鼠自然有仓鼠窝啦. 仓鼠窝是一个由n*m个格子组成的行数为n.列数为m的矩阵.小仓鼠现在想要知道,这个矩阵中有多少个子矩阵!(实际上就是有 ...

  7. ural Infernal Work

    Infernal Work Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Descr ...

  8. windows下 git配置ssh

    1. 打开 git bash 2. cd ~/.ssh 3. ssh-genkey (一致next),  会生成 id_rsa (密钥); id_rsa.pub(公钥) 4. 用记事本打开 id_rs ...

  9. SOAP-XML请求(iOS应用下集成携程api)

    用携程机票为例: 携程联盟 飞机票.门票 联盟ID:278639 站点ID:739462 密钥KEY:BE57B925-E8CE-4AA2-AC8E-3EE4BBBB686F API_URL:open ...

  10. AAL模版 中英文对照

    来源:http://52brain.com/thread-17336-1-1.html Brodmann分区是一个根据细胞结构将大脑皮层划分为一系列解剖区域的系统.神经解剖学中所谓细胞结构(Cytoa ...