解决浏览器兼容问题
解决浏览器兼容问题主要从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"; }
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列表缩进问题
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
