Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

Quirks模式与Standards模式的区别

    Home 设计工作站 设计技巧 Quirks模式与Standards模式的区别
    NextPrevious

    Quirks模式与Standards模式的区别

    By rainshadow | 设计技巧 | 0 comment | 7 8月, 2012 | 0

    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会失效
    许多CSS默认样式将不同
      在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
    这些都不用怎么去管了,以前的版本谁在意呢。如何避免默认quirk模式呢,一是设置doctype(<!DOCTYPE HTML>),二是doctype前不允许有任何字符(空字符除外),因为一旦发现有字符在文档首浏览器将会输出其在body并将字符与<HTML>之间的标记<!***>用<!—->注释起来,那么文档内容将无doctype设置。
    这里测试的仅为IE9,其他浏览器未知。
    code ,html

    rainshadow

    More posts by rainshadow

    Related Post

    • 如何将页脚固定在页面底部

      By rainshadow | 0 comment

      作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当Read more

    • Adobe Edge Reflow CC 响应式网页设计

      By rainshadow | 0 comment

      响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进,可谓一日千里Read more

    • 移动平台自动跳转到移动版网页

      By rainshadow | 0 comment

      原先网站是flash制作的首页,随着进入移动互联网时代,移动客户端几乎Read more

    • 做站必备神图

      By rainshadow | 0 comment

    • overflow解决float浮动后高度自适应问题

      By rainshadow | 0 comment

      也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那Read more

    Leave a Comment

    取消回复

    您的电子邮箱地址不会被公开。 必填项已用*标注

    NextPrevious

    标签

    Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js office ppt Premiere PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
    Copyright 2017 Rainshadow Studio | All Rights Reserved
    • Home
    • Photography
    • Design
    • Techniques
      • Photography Techniques
      • Design Techniques
    • Others
    Rainshadow Studio