jackyrong
- 浏览: 7851752 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi：
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng：
(转）JAVA获得机器码的实现 -
albert0707：
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707：
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle：
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
发现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"> 就可以了
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"> 就可以了
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 755刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 479三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1461http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 768https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1648即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 955不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2974参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92601. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 597http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 805http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9511 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 545虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 520【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1383https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 773深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 906(收藏）网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1107https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3117http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1521canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 522http://www.ruanyifeng.com/blog/ ...
相关推荐
能够识别浏览器是否处于隐身模式
当前360浏览器占据的浏览器市场20%以上的份额，我们做网站的肯定要考虑一下兼容性，有时候chrome与ie正常，但到了360浏览器就不行了，可能360双核的ie核心比较偏低版本的原因
护眼插件-浏览器夜间模式，护眼插件-浏览器夜间模式，护眼插件-浏览器夜间模式，护眼插件-浏览器夜间模式，护眼插件-浏览器夜间模式，护眼插件-浏览器夜间模式，护眼插件-浏览器夜间模式
开发跨浏览器JavaScript时要注意的问题开发跨浏览器JavaScript时要注意的问题
快捷键： Ctrl+B 显示/隐藏最前端精简模式。 Ctrl+G 隐藏/显示网页中的滚动条。...3.将本程序窗口放在合适的地方，Ctrl+B显示精简模式。 这样看土豆就可以和看ppstream等一样的精简模式观看了。 Have a good day!
2019年中国手机浏览器用户对浏览器简洁模式认可调查.xls
这个程序使用 Chrome 浏览器的无头模式来访问百度首页，并等待3秒钟，最后将屏幕截图保存为 `baidu.png` 文件。 请注意，在使用无头浏览器时，可能需要根据网站特定的设置调整其相关参数，比如 user-agent 和 ...
MicrosoftEdgePolicyTemplates EDGE浏览器企业模式策略包，适用于102.0.1245.33版本的浏览器
了解网页浏览模式 360安全浏览器内置了两种网页浏览模式:极速模式和兼容模式,我们会自动为您选择使用适合每个网站的浏览模式。点击地址栏的内核切换按
跨浏览器仿模式 窗体
浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。浏览器。...
对于不是非常了解计算机的小白来说，本文档可以帮助你解决设置浏览器的兼容模式。以帮助大家！
20 Things I Learned About Browsers and the Web（20个关于浏览器和互联网的那些事）
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
浏览器浏览器浏览器浏览器浏览器浏览器浏览器
Dark Reader - 是一款支持Chrome浏览器进入夜间模式的插件，非常好用，推荐给大家，Chrome浏览器夜间模式插件
浏览器 搜狗浏览器 搜狗浏览器 搜狗浏览器 搜狗浏览器 搜狗
360和搜狗浏览器兼容模式和极速模式切换登录态丢失问题.md
unix 浏览器unix 浏览器unix 浏览器unix 浏览器unix 浏览器unix 浏览器unix 浏览器unix 浏览器
本地测试浏览器模式选择