解决浏览器兼容问题

2024-01-04 12:44:28

解决浏览器兼容问题主要从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三项才能达到最终效果。

码农公寓

相关文章