手机、电脑的的兼容性
一般在写网页的时候我们会采用媒体查询和响应式。那么问题来了什么是媒体查询?什么是响应式? 媒体查询：可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 响应式：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。 重要的是：响应式网站布局的依据是：媒体查询 1)首先需要在 html 文档中添加以下代码，用来兼容移动设备的显示效果 ps:(这些都是什么意思呢？别急这就给您解释：width=device-width:宽度等于当前设备的宽度 initial-scale=1：初始的缩放比例（默认为 1） maximum-scale=1：允许用户缩放到得最大比例（默认为 1） user-scalable=no：用户不能手动缩放) 2)怎样在 CSS 文件中写 CSS 响应式媒体查询 例: @media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red; } @media screen and (max-width:320px){ body{ background-color:blue; } } 那么在html中怎么来做兼容呢？ <!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面） IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题。
css： 1.初始化样式：由于浏览器对标签的默认支持不同，所以我们要统一，就要进行 CSS reset。如 YaHoo 的 CSS reset。
**2.IE6 双边距 bug:** 块属性标签添加了浮动 float 之后，若在浮动方向上也有 margin 值，则 margin 值会加倍，就会把某些元素挤到了第二行。给 float 元素添加 display：inline 即可正常显示。 解决方案： img{border:none}||img{border:0}||img{ disply:block; }3.行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，ie6 间距 bug（类似第二种）: 解决方案：在 display:block;后面加入 display:inline;display:table;
4.图片默认有间距 解决方案：vertical-align:middle
5.超链接访问过后 样式就混乱了，hover 样式不出现了。其实主要是其 CSS 属性的排序问题。 解决方案：最好按照这个顺序：L-V-H-A a:link{} a:visited{} a:hover{} a:active{}
6.chrome 下默认会将小于 12px 的文本强制按照 12px 来解析。 解决办法是给其添加属性：-webkit-text-size-adjust: none;
7.两种盒子模式：IE 盒子模式和 W3C 标准模式，所以对象的实际宽度也要注意。以下是两种盒子模型的计算方法： 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 在怪异模式下，一个块的总宽度= width + margin(左右)（即 width 已经包含了 padding 和 border 值）
8.鼠标的手势也有问题：FireFox 的 cursor 属性不支持 hand，但是支持 pointer，IE 两个都支持；所以为了兼容都用 pointer
9.opacity 透明度问题： 一般就直接 opacity: 0.6 ; IE 就 filter: alpha(opacity=60)。 ie6 下：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
10.IE6 下 div 高度无法小于 10px 解决方案：verflow:hidden | zoom:0.08 | line-height:1px|font-size:0
11.由于浮动引起的无法识别父盒子高度问题 解决方案：4 种清除浮动的方法 清除浮动方法 1：给浮动的元素的祖先元素加高度。有高度的盒子，才能关住浮动。 清除浮动方法 2：clear:both;但是有致命缺陷，margin 失效。 清除浮动方法 3：隔墙法。在两个浮动的 div 间增加一个空 div，就像一个屏障隔开了 2 个浮动，使两个浮动间互不影响。缺点: 额外增加了很多的标签，对页面结构及其的不好。 清除浮动方法 4：overflow:hidden;zoom：1； 缺点： 里面尽肯能的不能有定位。 如果有定位，可能会切掉一部分。 清除浮动方法 5：利用 after 伪类清除浮动 .clearfix:after{ content:""; 内容 visibility:hidden; 隐藏 height:0; 高度一定是 0 display:block; 转换 clear:both; 清除浮动 } .clearfix{ zoom:1; 为了照顾 ie6 } 谁清除浮动，谁引用。
清除浮动方法 6:利用 before 和 after 伪类清除浮动 .clearfix:before,.clearfix:after{ content:""; display:table; /_转换为表格模式 css3 新加_/ } .clearfix:after{ clear:both; } .clearfix{ \*zoom:1; }12.行内块元素之间空白缝隙的问题: 解决方案： (1.)利用 margin 负值，例如 Margin-left:-8px; (2.)把行内块写到一行上去。 (3.)给父盒子加:font-size:0; (4.)利用 js 来清除缝隙。
13.为什么 web 标准中 IE 无法设置滚动条颜色了 解决方案：将 body 换成 html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> ＜/style>14.怎么样才能让层显示在 FLASH 之上呢? 解决的办法是给 FLASH 设置透明
<param name="wmode" value="transparent" /> javascript ： 1.HTML 对象获取问题 FireFox：document.getElementById(“idName”); ie:document.idname 或者 document.getElementById(“idName”). 解决办法：统一使用 document.getElementById(“idName”); 2.const 问题 说明:Firefox 下,可以使用 const 关键字或 var 关键字来定义常量; IE 下,只能使用 var 关键字来定义常量. 解决方法：统一使用 var 关键字来定义常量. 3.event.x 与 event.y 问题 说明:IE 下,event 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性. 解决方法：使用 mX(mX = event.x ? event.x : event.pageX;)来代替 IE 下的 event.x 或者 Firefox 下的 event.pageX. 4.window.location.href 问题 说明:IE 或者 Firefox2.0.x 下,可以使用 window.location 或 window.location.href; Firefox1.5.x 下,只能使用 window.location. 解决方法：使用 window.location 来代替 window.location.href. 5.firefox 与 IE 的父元素(parentElement)的区别 IE：obj.parentElement firefox：obj.parentNode 解决方法: 因为 firefox 与 IE 都支持 DOM,因此使用 obj.parentNode 是不错选择. 6.集合类对象问题 问题说明：IE 下，可以使用 () 或 [] 获取集合类对象；Firefox 下，只能使用 [ ]获取集合类对象。 解决方法：统一使用 [] 获取集合类对象。 7.自定义属性问题 问题说明：IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox 下，只能使用 getAttribute() 获取自定义属性。 解决方法：统一通过 getAttribute() 获取自定义属性。 8.input.type 属性问题 问题说明：IE 下 input.type 属性为只读；但是 Firefox 下 input.type 属性为读写。 解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的 input，然后在同样的位置再插入一个新的 input 元素。 9.event.srcElement 问题 问题说明：IE 下，even 对象有 srcElement 属性，但是没有 target 属性；Firefox 下，even 对象有 target 属性，但是没有 srcElement 属性。 解决方法：使用 srcObj = event.srcElement ?event.srcElement : event.target; 10.event 事件问题 document.onclick=function(ev){//谷歌火狐的写法，IE9 以上支持，往下不支持； var e=ev; console.log(e); } document.onclick=function(){//谷歌和 IE 支持，火狐不支持； var e=event; console.log(e); } document.onclick=function(ev){//兼容写法； var e=ev||window.event; var mouseX=e.clientX;//鼠标 X 轴的坐标 var mouseY=e.clientY;//鼠标 Y 轴的坐标 }11.DOM 节点相关的问题
//DOM 节点相关，主要兼容 IE 6 7 8 function nextnode(obj){//获取下一个兄弟节点 if (obj.nextElementSibling) { return obj.nextElementSibling; } else{ return obj.nextSibling; }; } function prenode(obj){//获取上一个兄弟节点 if (obj.previousElementSibling) { return obj.previousElementSibling; } else{ return obj.previousSibling; }; } function firstnode(obj){//获取第一个子节点 if (obj.firstElementChild) { return obj.firstElementChild;//非 IE678 支持 } else{ return obj.firstChild;//IE678 支持 }; } function lastnode(obj){//获取最后一个子节点 if (obj.lastElementChild) { return obj.lastElementChild;//非 IE678 支持 } else{ return obj.lastChild;//IE678 支持 }; }12.document.getElementsByClassName 问题
window.onload = function() { // 封装自己的类名 function getClass(classname) { //判断支持否 if(document.getElementsByClassName) { return document.getElementsByClassName(classname); } var arr = []; //用于返回 数组 var dom = document.getElementsByTagName("\*"); for(var i=0;i<dom.length;i++) // 遍历所有的 盒子 { var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组 // ["demo","test"]; for(var j=0;j<txtarr.length;j++) // 遍历 通过类名分割的数组 { if(txtarr[j] == classname) { arr.push(dom[i]); // 我们要的是 div } } } return arr; } }13.获取元素的非行间样式值：
function getStyle(obj,attr) { // 谁的属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 }else{ return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 } }14.阻止事件传播：
<script> var btn = document.getElementById("btn"); document.onclick = function() { alert("点击了空白处") } btn.onclick = function(event) { alert("点击了按钮") var event = event || window.event; if(event && event.stopPropagation) { event.stopPropagation(); // w3c 标准 }else{ event.cancelBubble = true; // ie 678 ie浏览器 } } </script>15.阻止默认事件：
//js 阻止默认事件 document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C 标准 }else{ e.returnValue='false';//IE.. } }16.鼠标滚轮滚动事件：
//鼠标滚轮事件 //火狐中的滚轮事件 document.addEventListener("DOMMouseScroll",function(event){ alert(event.detail);//若前滚的话为 -3，后滚的话为 3 },false) //非火狐中的滚轮事件 document.onmousewheel=function(event){ alert(event.detail);//前滚：120，后滚：-120 }17.设置监听事件：
//设置监听事件 function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为 false if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非 IE } else{ obj.attachEvent('on'+type,fn);//ie,这里已经加上 on，传参的时候注意不要重复加了 }; } function removeEvent(obj,type,fn){//删除事件监听 if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非 IE } else{ obj.detachEvent('on'+type,fn);//ie，这里已经加上 on，传参的时候注意不要重复加了 }; }18.浏览器的宽高问题: IE 中：
document.body.clientWidth ==> BODY 对象宽度 document.body.clientHeight ==> BODY 对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度FireFox 中：
document.body.clientWidth ==> BODY 对象宽度 document.body.clientHeight ==> BODY 对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度Opera 中：
document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度（即 BODY 对象宽度加上 Margin 宽） document.documentElement.clientHeight ==> 页面对象高度（即 BODY 对象高度加上 Margin 高）没有定义 W3C 的标准，则 IE 为：
document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox 为： document.documentElement.clientWidth ==> 页面对象宽度（即 BODY 对象宽度加上 Margin 宽) document.documentElement.clientHeight ==> 页面对象高度（即 BODY 对象高度加上 Margin 高） Opera 为： document.documentElement.clientWidth ==> 页面对象宽度（即 BODY 对象宽度加上 Margin 宽） document.documentElement.clientHeight ==> 页面对象高度（即 BODY 对象高度加上 Margin 高） 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth HTML 精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量19.可视区域大小
<script> function client() { if(window.innerWidth != null) // ie9 + 最新浏览器 { return { width: window.innerWidth, height: window.innerHeight } } else if(document.compatMode === "CSS1Compat") // 标准浏览器 { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } return { // 怪异浏览器 width: document.body.clientWidth, height: document.body.clientHeight } } document.write(client().width); </script>