浏览器模式问题

浏览器相关知识

浏览器的渲染

在w3c标准出来之前,不同的浏览器在页面上的渲染有不同的规范,即有怪异模式和兼容模式,

有了w3c标准之后,不同的页面对页面渲染有了统一的标准(标准模式和严格模式)

如果XHML文档包含完整的Doctype，那么它一般以标准模式 呈现。Doctype不存在或形式不正确导致Html和Xhtml文档以混杂模式呈现

区别是:

一：）在严格模式中: width是内容宽度,元素真正的宽度=margin-left-right+padding-left-right+border-left-right-width+width

在怪癖模式中:width是元素的实际宽度,内容宽度=width - ( padding-left + padding-right + border-left-width + border-right-width)

二:) 怪异模式(quirks)可以设置行内元素的宽高并且生效,在Stardards(标准模式)中设置不生效

三:) 可设置的百分比高度,在standsards模式下,一个元素的高度由其包含的内容决定,如果父元素没有设置高度,子元素设置百分比是无效的

四:) 还有其他的一些

就浏览器模式和兼容IE8的一个小总结

w3c 标准
ie8 之前
之前有个 怪异模式个兼容模式
怪异模式 对那中width和一般的有很大的区别 width = .width+padding-left-right+margin-left-right 可以直接设置行级元素的width和height
声明文档为doctype 为标准模式
也是兼容ie8的一个重点
兼容IE8
设置doctype
改变浏览器内核 <meta content="chrome=1;IE=edge"> 用最新的IE内核 有Google插件的内核 用Google内核渲染
对于某些不能识别的标签 可以用html5.shiv 辅助识别
对于css3新增的一些样式属性 用css3 PIE
max-width:100% 严格要求父元素的宽度是固定的
td中的max-width 设置不生效 设置table为table-layout:fixed
当样式display:inline-block时, 左右会重叠 解决用 float
placeholder 自己写 或用插件
first-child是css2的内容,但是last-child不是 解决 给最后一个加一个class last-element