`

关于浏览器的怪异模式要注意的地方

阅读更多
  发现IE  9和8下(自己用的是ie 10)在浏览某些页面的时候,发现F12时文档模式那里,用的是
QUICK模式,原来这个叫怪异模式,摘录下定义,详细见:
http://zh.wikipedia.org/zh-cn/%E6%80%AA%E5%BC%82%E6%A8%A1%E5%BC%8F

先看看什么是quirk模式,引用一段:http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

复制代码
为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Opera 全都支持一种名为“DOCTYPE 切换”(也叫“DOCTYPE 嗅探”)的功能。

引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开发为呈现 HTML 页而不是 XHTML 页。浏览器通过判断是否存在 DOCTYPE 来确定何时应该使用标准来呈现页。

Internet Explorer 6+ 支持两种呈现模式,分别叫做 Quirks 模式和 Standards 模式。当 Internet Explorer 呈现包含有效 XHTML(或 HTML 4.0)DOCTYPE 的页时,它会以 Standards 模式呈现该页;否则,它会以 Quirks模式呈现该页(有关详细信息,请参阅 CSS Enhancements in Internet Explorer 6)。

Opera 浏览器 (Opera 7+) 支持与 Internet Explorer 相同的两种呈现模式:Quirks 和 Standards(有关详细信息,请参阅 http://www.opera.com/docs/specs/doctype/)。

Mozilla Firefox 1+ 支持三种呈现模式:Quirks 模式、Almost Standards 模式和 Standards 模式。Firefox 的 Almost Standards 模式对应于 Internet Explorer 和 Opera 的 Standards 模式。当页包含有效的 XHTML 1.0 Transitional DOCTYPE(并且该页被分配为 text/html MIME 类型)时,Firefox 会以 Almost Standards 模式呈现该页。当页包含 XHTML 1.0 Strict 或 XHTML 1.1 DOCTYPE(或者该页被分配为 XML MIME 类型)时,该页将以 Standards 模式呈现(有关详细信息,请参阅 http://www.mozilla.org/docs/web-developer/quirks/doctypes.html)。

可以通过临时向页中添加以下客户端脚本(该脚本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效)确定浏览器的当前呈现模式。

<script type="text/javascript"> alert( document.compatMode ); </script>
您需要关心浏览器的呈现模式,因为它会影响将层叠样式表应用于该页的方式。如果将现有 HTML 页转换为 XHTML 页,那么在浏览器中打开它们时,它们可能看起来非常不同。

例如,Internet Explorer 以不同方式计算页元素的大小,这取决于呈现模式(它使用不同的 CSS Box Model)。在 Quirks 模式下,元素的宽度是通过将元素的内容、内边距、边框和边距相加而计算得到的。在 Standards 模式下,元素的宽度是只考虑元素内容的宽度而计算得到的。

复制代码
Quirks模式与Standards模式的区别
quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框
在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下,也会有这个问题
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
可设置百分比的高度
在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:
body{text-align:center};#{content:text-align:left}
设置图片的padding会失效
  Table中的字体属性不能继承上层的设置
white-space: pre会失效


--------------------------------------------------
当微软开始产生与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们IE6.0以后的版本在浏览器内嵌了两种表现模式: Standards Mode(标准模式或Strict Mode)和Quirks mode(怪异模式或兼容模式Compatibility Mode)。在标准模式中,浏览器根据W3C所定的规范来显示页面;而在怪异模式中,页面将以IE5,甚至IE4的显示页面的方式来表现,以保持以前的网 页能正常显示。
对于这两种模式引起最大的问题就是盒模式的问题,或者现在大家已经忽视了IE5的存在,但是,IE在怪异模式运行的盒模式依然在最新版本的IE7保留着,一旦应用不得当,IE7将变成跟IE5一样愚蠢。
当然,不只IE浏览器存在两种模式。
Opera 浏览器 (Opera 7~8) 支持与 IE 相同的两种呈现模式:Quirks Mode和 Standards Mode(有关详细信息,请参阅 http://www.opera.com/docs/specs/doctype/),但是Opera9的Quirks Mode又不与之前的Quirks Mode呈现不一样,比如不再兼容IE5那种盒模式。
Mozilla Firefox 1+ 支持三种呈现模式:Quirks Mode、Almost Standards Mode(几乎标准的模式)和 Standards Mode。Firefox 的 Almost Standards 模式对应于 IE 和 Opera 的 Standards 模式。其中的Almost Standards Mode,除了在处理表格的方式方面有一些细微的差异之外,这种模式与标准模式基本相同。对于进入Quirks Mode的可参考http://www.mozilla.org/docs/web-developer/quirks/doctypes.html)


----------------------------------

  为了解决这个问题,能让用户浏览页面的时候默认就使用标准模式,则需要声明好DTD就可以了,使用的是:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 就可以了
分享到:
评论

相关推荐

    关于《精通css》之几个不错的注意事项

    ### 关于《精通CSS》之几个不错的注意事项 #### 概述 《精通CSS》作为一本指导初学者乃至进阶用户掌握CSS技术的重要书籍,其内容的准确性和易读性至关重要。根据读者反馈与作者的补充观点,我们可以总结出以下几个...

    Weird Text Generator ᐈ #201+ Zalgo Text Fonts-crx插件

    然而,需要注意的是,由于Chrome的安全策略,直接安装`.crx`文件可能会被阻止,用户可能需要在设置中暂时启用开发者模式来完成安装。 在使用这款插件时,用户不仅可以享受创造独特文本的乐趣,还可以借此了解字符...

    `人工智能_人脸识别_活体检测_身份认证`.zip

    人脸识别项目实战

    深度学习教程和开发计划.zip

    深度学习教程和开发计划.zip

    事件总线_对象C_订阅发布_消息传递中间件_1741862275.zip

    c语言学习

    基本版贪吃蛇源代码.zip

    基本版贪吃蛇源代码.zip

    【Python毕设】p107基于Django的药店信息管理-vue.zip

    项目资源包含:可运行源码+sql文件+ python3.8+django+mysql5.7+vue 适用人群:学习不同技术领域的小白或进阶学习者;可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 项目具有较高的学习借鉴价值,也可拿来修改、二次开发。 有任何使用上的问题,欢迎随时与博主沟通,博主看到后会第一时间及时解答。 Django==3.2.11 PyMySQL==1.0.2 djangorestframework==3.13.0 django-cors-headers==3.13.0 Pillow==9.1.1 psutil==5.9.4

    Abaqus螺栓拧紧过程仿真 (1)螺栓螺母可实现参数化建模,全部采用六面体C3D8R单元建模 (2)施加边界条件实现螺母的拧紧过程,输出过程动画和应力、位移参数 (3)提取螺栓中部截面的轴力和螺母

    Abaqus螺栓拧紧过程仿真 (1)螺栓螺母可实现参数化建模,全部采用六面体C3D8R单元建模 (2)施加边界条件实现螺母的拧紧过程,输出过程动画和应力、位移参数 (3)提取螺栓中部截面的轴力和螺母拧紧力矩之间的关系 ,Abaqus; 螺栓拧紧; 参数化建模; 六面体C3D8R单元建模; 边界条件; 输出动画; 应力位移参数; 轴力与拧紧力矩关系。,Abaqus螺栓拧紧仿真:六面体单元建模与力矩关系分析

    苏苏源码-weixin123-基于SpringBoot的汽车售后服务系统及微信小程序的设计与实现(编号:49000250).zip

    标题基于SpringBoot的汽车售后服务系统及微信小程序的设计与实现AI更换标题第1章引言介绍汽车售后服务的重要性,SpringBoot和微信小程序的应用背景,以及本研究的意义和目的。1.1研究背景与意义阐述汽车售后服务市场的现状及发展趋势,SpringBoot和微信小程序在售后服务中的应用前景。1.2国内外研究现状概述国内外在汽车售后服务系统和小程序开发方面的研究进展。1.3研究内容与创新点介绍本文的主要研究内容,包括系统设计和微信小程序的开发,并阐述创新点。第2章相关理论与技术介绍SpringBoot框架、微信小程序开发的相关理论和关键技术。2.1SpringBoot框架概述阐述SpringBoot框架的特点、优势以及在系统开发中的应用。2.2微信小程序开发技术介绍微信小程序的开发流程、关键技术和功能实现。2.3数据库技术与系统设计讨论数据库设计原则、数据存储和处理速度的问题,并阐述系统设计的思路和方法。第3章系统需求分析与设计对汽车售后服务系统的需求进行分析,并设计系统的整体架构和功能模块。3.1需求分析从用户角度和业务需求出发,对系统的功能需求和非功能需求进行详细分析。3.2

    智慧园区安全方案(浙江大华)PPT(69页).pptx

    在智慧园区建设的浪潮中,一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点,通过信息化平台与智能硬件的深度融合,为园区带来前所未有的变革。 首先,智慧园区综合解决方案以提升园区整体智能化水平为核心,打破了信息孤岛现象。通过构建统一的智能运营中心(IOC),采用1+N模式,即一个智能运营中心集成多个应用系统,实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”,利用大数据可视化技术,将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上,管理者可直观掌握园区运行状态,实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒,还大幅提升了管理效率,让园区管理更加精细化、智能化。 更令人兴奋的是,该方案融入了诸多前沿科技,让智慧园区充满了未来感。例如,利用AI视频分析技术,智慧园区实现了对人脸、车辆、行为的智能识别与追踪,不仅极大提升了安防水平,还能为园区提供精准的人流分析、车辆管理等增值服务。同时,无人机巡查、巡逻机器人等智能设备的加入,让园区安全无死角,管理更轻松。特别是巡逻机器人,不仅能进行360度地面全天候巡检,还能自主绕障、充电,甚至具备火灾预警、空气质量检测等环境感知能力,成为了园区管理的得力助手。此外,通过构建高精度数字孪生系统,将园区现实场景与数字世界完美融合,管理者可借助VR/AR技术进行远程巡检、设备维护等操作,仿佛置身于一个虚拟与现实交织的智慧世界。 最值得关注的是,智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程,实现降本增效。例如,智能库存管理、及时响应采购需求等举措,大幅减少了库存积压与浪费;而设备自动化与远程监控则降低了维修与人力成本。同时,借助大数据分析技术,园区可精准把握产业趋势,优化招商策略,提高入驻企业满意度与营收水平。此外,智慧园区的低碳节能设计,通过能源分析与精细化管理,实现了能耗的显著降低,为园区可持续发展奠定了坚实基础。总之,这一综合解决方案不仅让园区管理变得更加智慧、高效,更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境,是未来园区建设的必然趋势。

    词法分析_SysY2022_标识符字面量_错误处理器_1741862780.zip

    c语言学习

    `移动开发_人脸识别_Face++_Android项目集成`.zip

    人脸识别项目源码实战

    计算机视觉_CNN_人脸识别_训练与测试.zip

    人脸识别项目实战

    电力电子技术基础-电力电子器件与典型应用解析

    内容概要:本文详细介绍了电力电子技术的基础知识及相关器件,内容涵盖电力电子器件(如晶闸管、GTR、IGBT)、相控整流电路(单相和三相)、直流斩波电路、交流变换电路、逆变电路、软开关技术等,并探讨了其应用场景(如开关电源、不间断电源(UPS)、电子镇流器、感应加热、直流电源、开关模焊接等),以及电力电子装置带来的电力公害(谐波污染、电磁干扰和功率因数降低)及其抑制方法。通过丰富的实例讲解了各类电路的工作原理和波形分析方法,旨在让学生和从业人员更好地理解和掌握该领域的核心技术和发展趋势。书中结合最新的研究成果进行了详尽阐述,使内容兼具科学性和创新性,并提供了大量习题以便于教与学。 适合人群:自动化、电气工程及其自动化等相关专业本科生、研究生和技术工程师。 使用场景及目标:①高校教师用于课堂授课,辅助学生深入理解电力电子器件工作原理;②电力电子领域科研人员和工程技术人员参考资料,掌握行业前沿技术和设计理念。 阅读建议:本文不仅讲解了电力电子器件的结构特点、操作流程,更重要的是展示了电力电子技术在整个电力系统和电气设备应用中的关键作用,希望读者能够在学习过程中理论结合实践,加深对知识的理解

    编译技术_C语言_Clang_AST_解释执行器_作业实现辅_1741861002.zip

    c语言学习

    万能视频拼接软件源码,可以直接进行修改增加功能,二次开发!

    万能视频拼接软件源码,可以直接进行修改增加功能,二次开发!

    1. 人工智能_图像识别_CaptchaRecognise_验证码识别.zip

    人脸识别项目源码实战

    医学设备FibroScan PRO肝病检测操作与数据解析指南(可复现,有问题请联系博主)

    内容概要:本文介绍了FibroScan PRO这款专门用于肝脏纤维化程度评估的医疗器械。强调了其仅能被认证过的专员使用,所得到的数据需要专业医生综合考虑病人的实际身体状况进行精准解释。文中列举了若干组测量示例以及相关单位,例如压力数值(kPa)、声衰减参数(dB/m),还特别指出VCTE探针的正确性和精确度依靠定期校正。此外,详细阐述了病人的姿势调整以及测试部位选取的原则,在不同层厚的情况下对皮肤组织进行检查。并提供了一份详细的检查报告模板,涵盖了操作者的身份确认、受检人基本信息、时间戳以及其他一些量化评价指标,例如IQR(四分位距),这有助于更好地理解和应用FibroScan的检测结果。 适合人群:面向医院、诊所等相关医疗保健机构的工作人员,包括但不限于操作员和技术支持团队成员。同时也可以为想要了解这一先进诊断工具的研究人员或医学学生提供重要参考资料。 使用场景及目标:旨在指导医疗机构如何标准化地完成FibroScan设备的实际临床应用过程;确保所有测量数据均能在符合质量控制的前提下产生,并提高医疗服务的质量和效率;并且帮助医师做出更加科学合理的健康决策,最终服务于病患的利益最大化。

    海豚鲸鱼数据集 5435张图 正确识别率可达92.6% 可识别:海豚 虎鲸 蜥蜴 海豹 鲨鱼 龟 支持darknet格式标注

    海豚鲸鱼数据集 5435张图 正确识别率可达92.6% 可识别:海豚 虎鲸 蜥蜴 海豹 鲨鱼 龟 支持darknet格式标注

Global site tag (gtag.js) - Google Analytics