记一次切图（PC）要注意的问题

两三年没有手切过页面，实在是有些生疏，再加上要做适配而且要兼容IE8及以上，确实是遇到一些问题，虽然都解决了，但是也在这里记录一下吧，算是一个小总结，再次遇到的话可以直接拿来用。
纯手动切图：自己用PS切图，手写HTML、CSS及原生JS。

1.window.onload不兼容IE
解决方案：

//兼容IE
if(navigator.appName === "Microsoft Internet Explorer"){
    window.attachEvent('onload', function(){
        //页面加载完要做的事情
    });
}else{// 谷歌、火狐、Safari、2345加速浏览器、360等
    window.onload=function(){
         //页面加载完要做的事情
    }
}

2.获取浏览器的宽高

// 浏览器窗口的内部高度 
function getHeight(){
    if(window.innerHeight!= undefined){
        return window.innerHeight;
    }else{  //兼容IE8以下处理
        return document.documentElement.clientHeight;
    }
}
// 浏览器窗口的内部宽度
function getWidth(){
    if(window.innerWidth!= undefined){
        return window.innerWidth;
    }else{  //兼容IE8以下处理
        return document.documentElement.clientWidth;
    }
}

3.获取行内样式

//getComputedStyle IE8以上、FireFox、Chrome支持
//element.currentStyle IE8及以下支持
function getStyle(obj,attr) { 
    if(typeof window.getComputedStyle!='undefined'){ 
        //如果支持W3C，使用getComputedStyle来获取样式 
        return parseInt(window.getComputedStyle(obj,null)[attr]);            
    }else if(obj.currentStyle){
        return parseInt(obj.currentStyle[attr]);
    } 
}

其中除了还用到了修改元素样式如下：

function updateStyle(obj){
	obj.style.width =100 + 'px';//通过element.style修改样式
}

getComputedStyle和element.style的异同点：
相同点：二者返回的都是CSSStyleDeclaration对象，取相应属性值的时候都是采用CSS驼峰式写法，均需注意float属性。
不同点：<1>element.style读取的只是元素的内联样式，即写在元素的style属性上的样式；而getComputedStyle读取的样式时最终样式，包括了内联样式、嵌入样式和外部样式。
<2>element.style既支持读也支持写，可以通过element.style改写元素的样式。而getComputedStyle仅支持读并不支持写。所以通常用getComputedStyle读取样式，通过element.style修改样式。
参考菜鸟教程window.getComputedStyle() 方法的使用
4.classList在IE10以下存在兼容问题
具体兼容处理请参考 小知识 — classList的用法介绍和兼容IE8
5.IE中img下面有白边的问题
解决方案：通过给img的父元素设置font-size:0；同时给img设置vertical-align: middle;来解决。
6.关于Safari浏览器的一个兼容问题
问题描述：一个div 里面有一个 img，div的高度动态计算
img的高度设置为100% ，改变浏览器的高度时，div及图片跟着变化chrome、2345加速浏览器、火狐、及IE浏览器正常，但是safari浏览器的图片就会变形。
我的解决方案是：div的高设为img的高，然后按照img原始的比例计算设计了宽。不知道还有没有更好的解决方案，欢迎评论指点，谢谢！

标签：style,浏览器,img,样式,切图,getComputedStyle,PC,window,注意
来源： https://blog.csdn.net/qq_28584841/article/details/100033079