金三银四，那浏览器兼容你知多少？ 为什么会存在浏览器兼容问题？首先要了解兼容，我们先得了解一下为什么会存在浏览器兼容问题。在各大浏览器厂商的发展过程中，它们对web的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题。浏览器内核五大浏览器内核以及各内核代表作品：Trident: IE、Maxthon（遨游）、Theworld（世界之窗）Gecko: Mozilla FirefoxWebkit: Safari、ChromePresto: OperaBlink: 由Google和Opera Softwase开发的浏览器排版引擎一些概念CSS BUGCss样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS BugCSS hackCSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。Filter它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。过滤器(filter)ps：过滤器可能这个说法有点不太正确，也可以说是浏览器标识符！_下划线过滤器当一个属性前面增加一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明。但是ie6及更低版本浏览器会继续解析。语法：选择器{_属性：属性值；}此方法是区分ie6浏览器和其他浏览器的方法！important关键字过滤器它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法）语法：选择符{属性：属性值！important；}*属性过滤器当一个属性前面加了*后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用语法：选择器{*属性：属性值；}+属性过滤器当一个属性前面加了+后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用语法：选择器{+属性：属性值；}*+属性过滤器当一个属性前面加了*+后，该属性能被ie7浏览器识别，其他浏览器忽略该属性的作用语法：选择器{*+属性：属性值；}\9ie版本识别，其他浏览器不识别语法：选择符{属性：属性值\9;} \0ie8及以上浏览器识别，其他浏览器不识别语法：选择符{属性：属性值\0;}-moz-Firefox浏览器识别，其他浏览器不识别-webkit-webkit内核浏览器识别，其他浏览器不识别-o-Opera浏览器识别，其他浏览器不识别-ms-ie浏览器识别，其他浏览器不识别常见的浏览器兼容问题以及解决方法1）、图片有边框bug描素:当图片加<a href="#" ></a>在ie上会出现边框hack:给图片加border：0；或者border：0 none；2）图片间隙描素:div中的图片间隙bug在div中插入图片时图片将div下方撑大大约三像素hack1：将</div>与<img />标签写在一行上；hack2：将<img />标签转换为块级元素，给<img />标签添加声明display：block；3）双倍浮向（双倍边距）（只有ie6出现）描素: 当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距（margin）加倍显示。hack：给浮动元素添加声明：display:inline;4）默认高度（ie6 ie7）描述：在ie6及以下版本中，部分块元素拥有默认高度（在16px左右）hack1：给元素添加声明：font-size：0；hack2:给元素添加声明：overflow：hidden；5）表单元素行高对齐不一致描素：表单元素行高对齐方式不一致hack：给表单元素添加声明：float：left；6）按钮元素默认大小不一描素：各浏览器中按钮大小不一致hack1：统一大小/（用a标记模拟）hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。7）百分比bug描素：在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）hack：给右边的浮动元素添加声明8）li列表的bug（1）当父元素li有float：left；子元素a没设置浮动的情况下会出现垂直bug；hack：给父元素li和子元素a都设置浮动（2）当li中的a转成block；并且有height 并有float的li没设置浮动会出现阶梯显示hack：同时给li加float9）当前元素（父元素里面的第一个子元素）与父元素没有设置任何浮动的情况下，设置margin-top后 会错误的把margin-top加在父元素上hack1：给父元素添加声明overflow：hidden；hack1：:给父元素的子元素添加浮动当两个上下排列的元素，上元素有margin-bottom下面元素有margin-top：他们的中间间距不会叠加而是设置为较大值10）鼠标指针bug描述：cursor属性的hand属性值只有ie9以下的浏览器识别，其他浏览器不识别该声明cursor属性pointer属性值ie6以上版本及其他内核浏览器都识别该声明hack：如统一某元素鼠标指针形状为手型，应添加声明cursor：pointer；11）透明属性兼容其它浏览器写法：opacity：value；（value取值0-1）ie浏览器写法：filter：alpha（opacity=value）；取值1-100（整数）12）Html对象获取问题FireFox：document.getElementById("idName");ie：document.idname 或者 document.getElementById("idName").解决办法：统一使用document.getElementById("idName");12） 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.13）window.location.href问题描述:IE或者Firefox2.0.x下，可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。解决方法：使用window.location来代替window.location.href。14）frame问题以下面的frame为例：<frame src="xxx.html" id="frameId" name="frameName" />(1)访问frame对象:IE:使用window.frameId或者window.frameName来访问这个frame对象, frameId和frameName可以同名。Firefox:只能使用window.frameName来访问这个frame对象.另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.(2)切换frame内容:在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";15）模态和非模态窗口问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能. 解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";