• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

解决浏览器兼容问题

开发技术 开发技术 13小时前 4次浏览

解决浏览器兼容问题主要从css、js、html入手:

1.css方面:

(1)png的24位图片在ie6会出现图片背景,解决方案是将其转换为png8位图片。

(2)不同的浏览器的html,body的初始值margin和padding是不一样的,其中做法是将其都设置为*{padding:0,margin:0},其他初始化设置如下面代码所示:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}
body {
  line-height: 1;
  font-family: "PingFang SC","Source Han Sans SC","HanHei SC","Helvetica Neue","Helvetica","Hiragino Sans GB","Microsoft YaHei","微软雅黑","Arial","sans-serif";
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

(3)如何是要做一个根据不同屏幕进行自适应的页面,最完美的方案是使用媒体查询和rem进行配合使用,下面给出一个解决rem实时响应的js解决方案:

//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

(4)ie6双边距的bug,块属性标签float后,又有横行的margin情况下,在ie6显示marign比设置的大,解决方案就是将float标签样式中加入display:inline,把它转换为行内元素,并且这个inline只有ie6可以识别。

(5)在ie下面可以使用常规的方法获取属性,也可以使用getAttribute()获取属性,但是在火狐浏览器中只能使用getAttribute()获取自定义属性,所以解决方法是统一使用getAttribute来获取方法。

(6)在谷歌浏览器中默认小余12号字体的会强制按照12号字体显示,解决方法是加入以下的css样式,或者是使用使用css3的缩放:

-webkit-text-size-adjust:none

(7)超链接访问过后hover样式不在出现了,解决方法是改变css属性:

L-V-H-A:a:link{} a:visited{} a:hover{} a:active{}

(8)在ie6中盒子的width是包括padding,在ie7和ie8中不包括padding。

2.js方面:

(1)触发事件的元素认为目标元素target,在ie中目标元素是包含到serEleelement属性中的

(2)阻止默认行为,ie中,必须将returnValue设置为false,Mozilla中需要调用preventDefault()方法。

(3)阻止默认行为,ie中是使用cancelBubble为true;在Mozilla中药调用stopPropagation()方法。

(4)innerText在IE中能正常工作,但在FireFox中却不行,需要使用textContent来实现,具体代码如下:

if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

作者:火烧冰山
链接:https://www.jianshu.com/p/6afd596440bb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

3.在html方面:

(1)图片默认是有边距的,解决方案是使用float布局img

(2)边距重叠问题,当两个相邻的元素设置了margin边距,margin会取最大值,舍弃最小值,解决方案是给其中一个元素添加一个父元素,并且设置style:overflow:hidden,代码如下:

<body>
    <div id="box1">盒子一</div>
    <div style="overflow:hidden"><div id="box2">盒子二</div><div>
</body>

(3)ul和ol列表缩进问题

消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list– style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

 


程序员灯塔
转载请注明原文链接:解决浏览器兼容问题
喜欢 (0)