试卷袋封面打印项目总结--兼容处理
项目描述：改变了以往老师们手写相同试卷封面的方式，使用线上系统填写，一键打印，多份生成。提高效率，避免不必要的工作。
为何要处理浏览器兼容性：
浏览器内核主要分为两种：渲染引擎 和 JS引擎( 例如谷歌的V8 )；内核更倾向于渲染引擎。
- CSS兼容
- JS兼容
一开始随着互联网的发展，不同浏览器之间的开发标准没有统一，到了最后才一致使用W3标准。
一、添加meta
项目中用到了比较多的meta属性，这里顺便介绍一下
meta就是告诉浏览器( 如何显示内容或重新渲染页面 )，搜索引擎(关键字)。相当新学期在讲台上自我介绍( html 的meta属性 )，自己喜欢什么，讨厌什么。让班主任(搜索引擎)更了解你。
常见属性：
二、当时不明白的细节
- href、src区别？
href( Hypertext Reference ) 网络资源位置，浏览器识别当前资源是一个样式表，页面解析不会暂停，另开线程加载CSS资源，同时生成 DOM 和 CSSOM。
src( Source )属性仅仅嵌入当前资源到当前文档元素定义的位置，在浏览器下载(等到DOMContentLoaded事件后执行)，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。
请求资源类型不同
- href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。
- 在请求src资源时会将其指向的资源下载应用在文档中，并替换当前内容
2.不要使用table标签（因为一开始我不熟练css）
-
- able标签解压后占用较多的字节
- Tablle会阻挡浏览器渲染引擎的渲染顺序
- able里显示图片时需要你把单个、有逻辑性的图片切成多个图
- 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦
三、处理兼容
CSS兼容，避免使用css3属性
1.采用重置通用属性样式
2.透明兼容样式
opacity: 0.5; filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx) 交互兼容性（javascript）
3.宽度兼容
标准模型： box-sizing:content-box //width = content 盒子模型： border-box // width = content+padding+border
4.使用浏览器私有属性
说到私有属性的出现也是因为制定HTML和CSS标准的组织W3C动作很慢。
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性
对于书写顺序一定要注意，兼容性写法放到前面，把标准写法放到最后
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ transform:rotate(-3deg);
JS兼容
一、event事件
事件对象
event = event || window.event
事件流捕获dom目标
var e=e||window.event; var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE... var to=e.relatedTarget||e.toElement;//鼠标去的地方
滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
alert(event.detail);//若前滚的话为 -3，后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
alert(event.detail);//前滚：120，后滚：-120
}
设置监听事件
function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);//非IE
} else{
obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
};
}
function removeEvent(obj,type,fn){//删除事件监听
if (obj.removeEventListener) {
obj.removeEventListener(type,fn,false);//非IE
} else{
obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
};
}
二、dom相关获取
获取节点、类节点——通过浏览器获取标签结点，然后匹配每个节点的类名
function getByClass(sClass,oParent){
var Parent = oParent || document;//先获取所有的子元素
var oEle = Parent.getElementsByTagName('*'); //声明一个空数组用来存放获取到的元素
var newArr=[];//如果是常规浏览器，document.getelementsByClassName方法为true，则直接使用
if(Parent.getElementsByClassName){
return Parent.getElementsByClassName(sClass);//没有这种方法的话，则需要拿到所有的子元素，再做判断
}else{ //遍历所有的子元素，得到所有的className；
for(var i=0;i<oEle.length;i++){//将得到的 className 用数组保存
var cn = oEle[i].className;
var arr = cn.split(" ");
if(arr[j] == sClass){
newArr.push(oEle[i]);
break;
}
}
}
return newArr;
}
}
处理事件流事件
var e=e||window.event;
if (e.preventDefault) {//阻止默认事件
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
if (e.stopPropagation) {//事件冒泡
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
设置setAttribute
object.setAttribute(“style”,“position:absolute;left:10px;top:10px;”) 在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。 object.setAttribute(“cssText”,“position:absolute;left:10px;top:10px;”)
设置innerText
var div = document.getElementById("content");
function getInnerText(element) {
return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"
