Quirks模式与Standards模式-转载

如何进入Standards模式?

一般来讲浏览器是通过DTD来判断模式的;浏览器进入Standards模式的DTD有:HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

  • strict去掉了许多表现的标签,有利于结构和表现的分离
  • loose会导致Firefox进入Almost Standards模式,在图片的处理上会有微小的差别

在IE6下,如果在DTD之前有任何字符都将导致其进入quirks模式

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}
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
许多CSS默认样式将不同
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
JavaScript中的区别
Quirks mode的Table of measurements

参考

dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat,分别对应quirks mode和strict mode

void function(){
var mode=document.compat
if (mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
else if(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
else alert("浏览器版本不支持compatMode");
}()

刚安装了百度空间的同步插件

刚安装了百度空间的同步插件,所以就迫不及待的测试一下,说实话最近一直很忙,就这两天稍微清闲一些。所以就拾起了我的博客写一些实践中得到的经验和总结。也衷心的希望和大家学习交流!

Fiddler的几个使用技巧-转载

只简单说下和前端开发调试密切相关的:

  1. 使用AutoResponder本地调试文件。请参考如何直接调试线上页面的JavaScript和CSS.
  2. 使用QuickExecBox快速操作。请参考QuickExec Reference. 推荐熟练掌握的命令:?sometext, bpu, go, urlreplace. 快捷键:Alt + Q, Ctrl + I, Shift + Del, Ctrl + X, F6.
  3. 使用Filter过滤信息。比如禁用JS, 设置断点等等。
  4. 使用bpu + Inspectors动态修改Response. 比如修改页面中的JS代码片段等等,非常有用。
  5. 使用Request Buidler测试请求。可以很方便的测试ajax代码。
  6. 使用Statistics + Timeline + neXpert查看性能等统计数据。
  7. 使用CustomRules, 自定义配置和命令等。比如修改var m_DisableCaching: boolean = false;的值为true, 就可以默认禁止缓存。还可以自定义命令等等。
  8. 开发自己的扩展。请参考Extending Fiddler with .NET Code.

最后强烈推荐Fiddler的视频教程:Fiddler Demonstration Videos(听不懂没关系,能看懂就能学会)

另外,Firefox下推荐使用FoxyProxy自动切换代理。一次设定,服务终身。

wordpress3.0正式版发布了!

wordpress3.0正式版发布了!马上去下载体验了!

页数 1 2 3 下一页