为什么要加入<!doctype html>这个文档声明——IE怪异模式
调试了很久，发现了一个非常细微但又十分重要的问题，又一次我在对于文档声明类型的时候，声明了如下类型
<!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怪异模式的更多相关文章
- 为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式?
不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式,然而使用了 DOCTYPE,也不一定就能够使文档在所有浏览器中均处于标准模式. DOCTYPE 本身不就是一个“开关”吗?为何在有 DOC ...
- 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?
文档声明的作用: 文档声明是为了告诉浏览器,当前HTML文档使用什么版本的HTML来写的,这样浏览器才能按照声明的版本来正确的解析. <!doctype html> 的作用就是让浏览器进入 ...
- HTML文档声明
前面的话 HTML文档通常以类型声明开始,该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型.本文将详细介绍文档声明DOCTYPE 特点 文档声明必须是HTML文档的第一行.且顶格显示, ...
- HTML（一）HTML基础语法（HTML简介，HTML文档声明）
HTML 概念介绍 [概念] (Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言 超文本(Hyper Text):不只包括文本,也可以包括图片.链接.音乐 ...
- Html5新特性之文档声明和头部信息
Html5推出的新内容比较多,本文我们来介绍两个重点内容,文档类型声明和头部信息. 无论是Html4.01还是XHtml1.0,所有文档的开头都会有文档声明<!DOCTYPE>标签来声明它 ...
- 课时14.DTD文档声明上（掌握）
1.什么是DTD文档声明? 由于HTML有很多格版本的规范,每个版本的规范之间又又一些差异,所以为了让浏览器能够正确的编译/解析/渲染我们的网页,我们需要在HTML文件的第一行告诉浏览器,我们当前这个 ...
- 文档声明和HTML样式表
文档声明 不是注释也不是元素,总是在HTML的第一行 书写格式:<!DOCTYPE HTML> 是用于通知浏览器目前文档正使用哪一个HTML版本(相关属性 lang) 若不写文档声明,浏览 ...
- HTML5入门：HTML5的文档声明和基本代码
HTML5的文档声明: HTML5的文档声明,不同于HTML4.0和XHTML,它精简了许多代码,只保留<!DOCTYPE html>开头,必须位于HTML5文档的第一行,它可以用来告诉浏 ...
- HTML&CSS基础-文档声明
HTML&CSS基础-文档声明 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML的发展 1993年6月: HTML第一个版本 1995年11月: HTML2.0 ...
随机推荐
- Linux信号类型说明
说明 在Linux系统开发中经常要使用到信号来实现异步通知机制.而在Linux系统中信号有很多种,也不用全部记住,学习几种常见的信号,学会使用即可:当然也要知道用哪种方式能够发送这样的信号. 查看li ...
- 六、Android学习第五天——Handler的使用（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 六.Android学习第五天——Handler的使用 注意:有很多功能是不 ...
- Token Based Authentication in Web API 2
原文地址:http://www.c-sharpcorner.com/uploadfile/736ca4/token-based-authentication-in-web-api-2/ Introdu ...
- ios移动端切图及前端规范
移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1. 设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X133 ...
- hdu-5493 Queue(二分+树状数组)
题目链接: Queue Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- Mecanim 动作复用示例
Mecanim动作复用 资源包 四个动画文件 一个Controller 不同的模型 让模型都生成Avter,然后让多个模型重用一套动作 复用动作预览 动画状态机 资源地址 Assets Store地址 ...
- 阿里云377秒完成100TB数据排序：秒三星百度
阿里云377秒完成100TB数据排序:秒三星百度 今日,Sort Benchmark 在官方网站公布了 2015 年排序竞赛的最终成绩.其中,阿里云用不到 7 分钟(377 秒)就完成了 100TB ...
- 嵌入式Linux驱动学习之路(六)u-boot启动内核
内核启动是需要必要的启动参数.不能开机自动完全从0开始启动,需要uboot帮助内核实现重定位并提供参数. 首先,uboo会从Kernel分区中读取bootcmd环境变量,根据环境变量可自动启动. 分区 ...
- poj 2186 Popular Cows
Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 29908 Accepted: 12131 De ...
- java.io.IOException: 您的主机中的软件中止了一个已建立的连接解决办法
问题现象和http://hi.baidu.com/cara_cloud/item/193a3ee327546d395a2d64be描述的一样,就是在eclipse的console栏中一直显示java. ...