【F12一下,看看页面里的第一行】——说说浏览器兼容性模式

面试官:请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式,当你打开IE9时候会看见,浏览器模式,文档模式,兼容性视图,这些又是什么?

尼玛啊......这些都是什么鸟东西......

好吧,一点点来:先明白一个词DTD(文档类型定义),也就是你F12后,页面里第一行的一串东西,即doctype声明。

这一串东西就是告诉浏览器你要用何种模式来渲染页面,说白了就是让浏览器用何种标准的CSS进行页面布局。

有三种模式供你选择:

  1. 标准模式(Standards Mode)
  2. 准标准模式(Almost Standards Mode)
  3. 怪癖模式(Quirks Mode)

官方定义

  • 标准模式(Standards Mode)

   标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

  • 准标准模式(Almost Standards Mode)

     它按照传统的做法来实现表格单元格的垂直尺寸而不是严格的遵照CSS2规范,更接近Mozilla的准标准模式而不是Mozilla的标准模式。

  • 怪癖模式(Quirks Mode)

     怪癖模式中,为了避免“破坏”那些根据在20世纪90年代末流行的实践创作的页面,浏览器违反了现代的Web格式规范。不同的浏览器实现了不同的怪癖行为。IE6、7和8中,怪癖模式有效地冻结在IE5.5 。其他浏览器中,怪癖模式是对准标准模式的少量偏移。

 

自定义

  • 标准模式(Standards Mode)

     官方规定,你跟着照做就行了。

  • 准标准模式(Almost Standards Mode)

     在设置line-height,某些情况下的height,这两种效果会无法正确执行,其他和标准一样(当前新浏览器已经放弃了此模式)

  • 怪癖模式(Quirks Mode)

     一种非主流模式,由于当年IE6灰常NB,当时所有的页面都要符合他的渲染标准,但由于标准的出现,大量的页面都无法适应新标准,而IE为了包容这些站点,所以保留了这种模式,也就是不规范的CSS算法,主要体现在盒子模型上。

 

触发方式

  • 标准模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <!-- 严格执行 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 兼容XHTML废弃的标签 -->
  • 准标准模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
  •  怪癖模式

      第一行不写,或写错DOCTYPE就能触发

  • 一统江湖式
<!DOCTYPE html>    <!-- HTML5 -->

 

想以后侃倒面试官的请阅读:

外国某大神的:Activating Browser Modes with Doctype;国内谋神翻译版:《用doctype激活浏览器模式》

各种模式详细触发:DOCTYPE声明问题 (PS:包含各种变态的IE模式)

准标准模式相关:Gecko's "Almost Standards" Mode

        Almost Target

 

 

转载于:https://www.cnblogs.com/ccto/archive/2013/03/06/2946713.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java学习第七天

2019独角兽企业重金招聘Python工程师标准>>> 内部类 在类的内部也可以定义另一个类 ------------------------------------------------------------//类嵌套类,类中带有类//内部类跟方法一样&#xff0c;可以使用全部的访问权限修饰符,用法是一样的 接口 Int…

大一计算机课实训总结1000字,大一计算机实训报告.doc

文档介绍&#xff1a;大一计算机实训报告.doc大一计算机实训报告总结及相关经验当迈入中南大学的第一刻时,我知道我的新的生活开始了。而不知不觉第一学期即将在漫漫寒冬中结束,计算机课上有很多感受,是应该对自己所学有个总结的时候了。计算机应用是实践性很强的课程,它要求我…

并不是每个女生都能穿出这种效果......

1 阿姨&#xff0c;我需要一个你▼2 像极了是悬空的...▼3 放弃吧&#xff0c;整点阳间的...▼4 一个人如何自拍&#xff1f;&#xff08;Twitter&#xff1a;Kskb_Tsuki&#xff09;▼5 哥哥表示睡着了就把她饼干吃了...&#xff08;via.dy俩小小赵&#xff09;▼6 敲法器…

手把手教你学Dapr - 1. .Net开发者的大时代

Dapr全称Distributed Application Runtime&#xff0c;分布式应用运行时Dapr的口号简化云原生应用开发&#xff0c;聚焦在应用的核心逻辑&#xff0c;让代码简单、可移植Dapr的目标最佳实践的构建块任何语言或框架一致性&#xff0c;可移植&#xff0c;开放的API采纳标准可扩展…

Andorid之网络通信框架Volley使用和总结

Volley Volley 是 Google 推出的 Android 异步网络请求框架和图片加载框架。在 Google I/O 2013 大会上发布。 从名字由来和配图中无数急促的火箭可以看出 Volley 的特点:特别适合数据量小,通信频繁的网络操作

如何进行服务器选购[转]

各大服务器厂商为了更突出产品热点&#xff1a;开始在服务、方案方面进行花样翻新、包装&#xff0c;但万变不离其中&#xff0c;不管厂商们怎么样包装&#xff0c;只要我们抓住重点分析&#xff0c;希望下面的文章能够为您提供一些参考与帮助&#xff1a;详情点击&#xff1a;…

闲鱼有微信小程序吗_微信小程序商品展示页面(仿咸鱼)

项目中做了一个商品发布展示的页面&#xff0c;记录下来解决问题&#xff1a;想在setData中更改数组具体下标中的某个值let one "lowMoney[" 0 "].money";this.setData({[one]: (product.currentPrice * 0.1).toFixed(2), //1折})快去发布商品吧~~~已下…

objective-c中的static

在方法之外定义的变量不仅是全局变量,还是外部变量.但是很多场合,我们只需要定义为全局变量,并不是外部变量.也就是说希望定义的全局变量只在特定文件中是全局的,这个变量也只有在特定的类中的方法能访问,再也没有其他方法需要访问这个变量了. 这就引出了static. 被static修饰过…

电子计算机制作探测,如何自己制作一个简易的金属探测器

这是一个金属探测电路&#xff0c;它可以隔着地毯探测出地毯下的硬币或金属片。这个小装置很适合动手自制。一、元器件的准备电路中的NPN型三极管型号为9014&#xff0c;三极管VT1的放大倍数不要太大&#xff0c;这样可以提高电路的灵敏度。VD1-VD2为1N4148。电阻均为1/8W。金属…

“对不起,我们只招父母毕业于名牌院校的孩子”:最可怕的,是你还以为学历不重要...

全世界只有3.14 % 的人关注了爆炸吧知识1 近日&#xff0c;有一条新闻引发网友热议。成都某小学入学面试&#xff0c;要求家长除了带照片和身份证件之外&#xff0c;还要带“父母学历证书原件及复印件”。网上有种说法&#xff0c;该小学筛选的标准是父母毕业于211院校。后来眼…

.NET 6 对 StackOverflow 的优化

.NET 6 对 StackOverflow 的优化Intro去年写了一系列的傻逼代码, 其中有一篇 写了多年代码&#xff0c;你会 StackOverflow 吗&#xff0c;昨天一不小心又写了一个 StackOverflow 代码。。然后想把新的代码加到原来 StackOverflow 的示例中&#xff0c;把原来的示例项目改成了 …

【原】python中文文本挖掘资料集合

这些网址是我在学习python中文文本挖掘时觉得比较好的网站&#xff0c;记录一下&#xff0c;后期也会不定期添加&#xff1a;1.http://www.52nlp.cn/python-%E7%BD%91%E9%A1%B5%E7%88%AC%E8%99%AB-%E6%96%87%E6%9C%AC%E5%A4%84%E7%90%86-%E7%A7%91%E5%AD%A6%E8%AE%A1%E7%AE%97-…

Android之从网络上获取图片的两种方式讲解:thread+handle和AsyncTask方式

从网络上获取图片是一个比较耗时的操作,放在主线程会导致阻塞主线程,响应超时,所以我们不能把它放在主线程里操作,必须放在一个子线程里,我打算采用两种方式去实现。1、采用thread去获取图片,获取到后通过handle把消息发送到与主线程绑定的消息队列中(也就是主线程的loo…

freeware

http://www.nirsoft.net/utils/iconsext.html转载于:https://www.cnblogs.com/androidme/archive/2013/03/13/2957509.html

卸载wrapt_[python] 安装TensorFlow问题 解决Cannot uninstall 'wrapt'. It is a distutils installed project...

cmd安装 pip install tensorflow1.遇到了ERROR: Cannot uninstall wrapt. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.办法1&#xff1a;输入 pip install -U --ig…

推荐16款非常有创意的婚礼请贴

为什么80%的码农都做不了架构师&#xff1f;>>> 日期&#xff1a;2012-4-5 来源&#xff1a;GBin1.com 婚约是标志着你和你的伴侣很快就要有新的开始了&#xff0c;一起开始那段新的历程&#xff01;婚礼是整个人生旅途中的一个重要里程碑&#xff0c;在婚礼的邀请…

三年磨一剑,五次被拒稿,交大博士坚持稿件申诉,终发表学科顶刊

全世界只有3.14 % 的人关注了爆炸吧知识本文来源&#xff1a;募格学术三年磨一剑&#xff0c;经历五轮审稿被拒&#xff0c;他坚持不懈&#xff0c;最终申诉成功发表物理顶刊&#xff1b;厚积薄发、精益求精&#xff0c;他潜心科研&#xff0c;2年内发表6篇高水平论文&#xff…

Android之面试题精选,自己收藏下

1.android dvm 的进程和Linux的进程&#xff0c;应用程序的进程是否为同一个概念&#xff1a; 答&#xff1a;dvm是dalivk虚拟机。每一个android应用程序都在自己的进程中运行&#xff0c;都拥有一个dalivk虚拟机实例。而每一个dvm都是在linux的一个进程。所以说可以认为是同一…

Java内部类详解(转)

说起内部类这个词&#xff0c;想必很多人都不陌生&#xff0c;但是又会觉得不熟悉。原因是平时编写代码时可能用到的场景不多&#xff0c;用得最多的是在有事件监听的情况下&#xff0c;并且即使用到也很少去总结内部类的用法。今天我们就来一探究竟。下面是本文的目录大纲&…

红旗河最早设计计算机的目的,论红旗河的利弊及其替代方案

最近网上有一条人工河很吸人眼球&#xff0c;它就是我国许多专家们提议的"藏水入疆"的西线调水工程——红旗河&#xff0c;其初衷是好的&#xff0c;想将丰沛的西藏雪化水及降水引入干旱的西北地区滋润出良田来改善中华民族的生存环境&#xff0c;但我认为该工程将是…