其他分享
首页 > 其他分享> > 记一次切图(PC)要注意的问题

记一次切图(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