您对浏览器兼容性了解多少？
时间：2023-03-30 22:30:12
CSS
为什么会出现浏览器兼容性问题？首先，我们必须了解兼容性。首先要明白为什么会出现浏览器兼容性问题。各大浏览器厂商在开发过程中，对web标准的实现各不相同，存在标准的差异，所以就产生了兼容性问题。浏览器核心五大浏览器核心及各核心代表作品：Trident：IE、Maxthon（傲游）、Theworld（世界之窗）Gecko：MozillaFirefoxWebkit：Safari、ChromePresto：OperaBlink：Google和OperaSoftwase开发的浏览器排版引擎一些概念CSSBUGCs样式在各种浏览器中解析不一致，或者说Css样式不能在浏览器中正确显示的问题称为CSSBugCSShack在CSS中，hack指的是兼容CSS在不同浏览器中正确显示的Trick方法，因为它们都属于个人非官方修改css代码，或者非官方补丁。有些人更喜欢用patch来描述这种行为。Filter是一种为特定浏览器或浏览器组显示或隐藏规则或语句的方法。本质上，过滤器是一种用于过滤不同浏览器的黑客技术。Filter（过滤器）ps：过滤器可能有点不对，也可以说是浏览器标识符！_underscore过滤器当下划线添加到属性的前面时，声明将被忽略，因为符合标准的浏览器不识别带下划线的属性。但是ie6及更低版本的浏览器会继续解析。语法：selector{_attribute:属性值;}这个方法是ie6浏览器区别于其他浏览器的方法！important关键字filter表示附加的语句优先级最高，首先被浏览器显示（ie6不识别这种写法）语法：selector{attribute：属性值！重要的;}*attributefilter当属性前面加*时，ie7及以下浏览器可以识别该属性，其他浏览器忽略该属性的作用语法：selector{*attribute:属性值;}+attributefilter当一个属性前面加一个+时，该属性可以被ie7及以下浏览器识别，其他浏览器忽略该属性的作用。语法：选择器{+属性：属性值；}*+attributefilterwhenanattribute添加**+后，该属性可以被ie7浏览器识别，其他浏览器忽略该属性的作用。attribute:属性值\9;}ie8及以上浏览器识别，其他浏览器不识别o-Opera浏览器识别，其他浏览器不识别-ms-ie浏览器识别，其他浏览器不识别常见浏览器兼容性问题及解决方法1）、图片有边框bug草图：给ie添加图片时，有边框会出现Hack:Addbordertothepicture:0;或边框：0无；2）图片空隙sketch：div中的图片空隙bug在div中插入图片时，图片会在div下部展开大约三个像素hack1：将
和
![]()
写在一行；hack2：将
![]()
转化为块级元素，在
![]()
中添加声明display:block；3）doublefloat（DoubleMargin）（仅在ie6中出现）概要：ie6及以下版本浏览器在解析浮动元素时，会错误地将浮动边距（margin）加倍。Hack：向浮动元素添加一条语句：display:inline;4）默认高度（ie6ie7）说明：在ie6及以下，部分块元素有默认高度（16px左右）hack1：在元素中添加声明：font-size:0;hack2：在元素中添加语句：overflow:hidden;5）表单元素行高对齐不一致不同描述：不同浏览器按钮尺寸不同hack1：统一尺寸/（用标记模拟）hack2：在input外设置一个label，在这个label中写上button的样式,去掉input的边框hack3:如果这个按钮是图片，就用图片作为按钮的背景图片即可。7）百分比bug说明：ie6及以下解析百分比时，会四舍五入计算，导致50%加上50%大于100%的情况。（也会被系统影响）Hack：在右边的floating元素上加一条语句8）li列表的Bug（1）当父元素li有float:left;当子元素a没有设置为浮动时，会出现垂直bug；hack:为父元素li和子元素a都设置floats(2)当ainli转为block时；而liwithheight和float没有设置为float，会出现梯形显示hack：同时给li添加float9）当前元素（父元素如果是里面的第一个子元素）和父元素没有任何浮动设置，设置margin-top后，margin-top会被误加到父元素上hack1::给父元素的子元素添加浮点数。当两个元素上下排列时，上面的元素有margin-bottom，下面的元素有margin-top：它们的中间间距不会重叠，而是设置一个较大的值。10）鼠标指针bug描述：cursor属性的hand属性值只有ie9以下的浏览器才能识别，其他浏览器不识别该语句。cursor属性的pointer属性值是ie6及以上版本和其他内核浏览器都可以识别的。,语句cursor:pointer应该加上；11）transparent属性兼容其他浏览器：opacity:value；（取值范围为0到1）即浏览器：过滤器：alpha（opacity=value）；valuesrangefrom1to100(Integer)12)Html对象获取问题FireFox:document.getElementById("idName");即：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问题描述：IEorFirefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location解决办法：使用window.location，不要使用window.location.href。14）框架问题以下面框架为例：
（1）访问框架对象：IE：使用window.frameId或window。frameName来访问这个框架对象，frameId和frameName可以有相同的名字。Firefox：您只能使用window.frameName访问此框架对象。此外，您可以使用window.document.getElementById("frameId")在IE和Firefox中访问此框架对象。(2)切换框架内容：在IE和Firefox中在Firefox中，可以使用window.document.getElementById("testFrame").src="xxx.html"或者window.frameName.location="xxx.html"来切换框架的内容。如果需要将frame中的参数传回父窗口（不是opener，而是父frame），可以使用frame中的parent来访问父窗口。例如：parent.document.form1.filename.value="阿青";15）模态和非模态窗口问题描述：在IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；在Firefox下，你不能。解决方法：直接使用window.open(pageURL,name,parameters)打开一个新窗口。如果需要将子窗口中的参数传回父窗口，可以在子窗口中使用window.opener来访问父窗口。例如：varparWin=window.opener;parWin.document.getElementById("阿青").value="阿青";小广告是我做的公众号，记录我自己的成长！公众号:前端说公众号ID:js-sayps:是(yue)不是(ri)
