各种浏览器兼容问题列表
浏览器常用12种兼容问题(JS)

浏览器常⽤12种兼容问题(JS)//1.滚动条到顶端的距离(滚动⾼度)var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;/3. IE9以下byClassNamefunction byClassName(obj,className){//判断是否⽀持byClassNameif(obj.getElementsByClassName){//⽀持return obj.getElementsByClassName(className);}else{//不⽀持var eles = obj.getElementsByTagName('*'); //获取所有的标签var arr = []; //空数组,准备放置找到的对象//遍历所有的标签for(var i = 0,len = eles.length;i < len;i ++){//找出与我指定class名相同的对象if(eles[i].className === className){arr.push(eles[i]); //存⼊数组}}return arr; //返回}}//4. 获取⾮⾏内样式兼容 IE:currentStyle 标准:getComputedStylefunction getStyle(obj,attr){return window.getComputedStyle ? getComputedStyle(obj,true)[attr] : obj.currentStyle[attr];}//div.style.width = '';设置样式//obj['属性']:对象是变量时,必须⽤对象['属性']获取。
如何解决不同浏览器之间的兼容性问题

如何解决不同浏览器之间的兼容性问题常见的浏览器兼容性问题与解决方案大致有以下九种形式:一、不同浏览器的标签默认的外边界和内填充不同问题表现:不加样式控制下,margin和padding差异较大解决方案:css里*{margin:0; padding:0;}备注:这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0二、块属性标签float后,又有横向的margin情况下,在IE6显示mar gin比设置的大问题表现:IE6后面的一块被顶到下一行解决方案:在float的标签样式控制中加入display:inline;转化为行内属性备注:横向浮动的div布局,使用上margin进行边界设置时,必然会碰到此问题三、设置较小高度标签(一般小于10px),在IE6、IE7,遨游中高度超出设置高度值问题表现:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-he ight小于你设置的高度备注:一般出现在设置小圆角背景的标签里。
出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度,即使标签是空内容,标签的高度还是会有默认行高。
四、行内属性标签,设置display:block后采用float布局,又有横向的m argin情况,IE6间距bug问题表现:IE6的间距比超过设置的间距解决方案:在display:block;后面加入display:inline;display:table;备注:行内属性标签,为了设置宽度,需要设置为display:block;(表单元素除外)在用float布局且有横向margin后,在IE6下,就具有了块属性float后的横向margin的bug。
由于设置为display:inline,高度失效,所有在后面补上display:table。
在IE和火狐浏览器下页面兼容性问题的处理(最完整篇)

最全的CSS浏览器兼容问题CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS处理,作为W3C的标准,一定要加 DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:00 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block;//可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果diplay:table;4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。
浏览器兼容性整理v4.0

浏览器兼容性总结1 浏览器兼容问题案例签名元件: 原来的实现方式:Ie 可以正常使用Chrome 不支持原因是:chrome 不支持 showModalDialog 方法2 兼容性问题由来因为不同浏览器使用内核及所支持的 HTML 等网页语言标准不同,导致对 html、css、js 的支持程度也不同。
Fire-fox、Opera、Safari、Chrome 这些 IE 的挑战者外,IE 本身也同时流行着 IE 6、IE 7 和 IE 8 三个不同的版本。
不同的浏览器对网页代码的解析存在着或大或小的 差异。
我们近期做的平台改造,遇到很多类似的兼容性问题,下面是浏览器兼容性简单总结。
总结分成两块。
3 CSS 兼容性总结 3.1 怪异模式浏览器用标准模式和怪异模式这两种方法来解析网页。
在标准模式中 content-box 盒模型下,网页元素 width= padding+border+width 怪异模式中 border-box 盒模型下:网页元素 width=width(已包含 padding、border) (https:///box-sizing/ )演示例子。
我们推荐使用标准模式。
3.2 DTD在 HTML5 中: <!DOCTYPE html>漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中(包括 IE 6、IE 7、 IE 8)就会触发怪异模式 为了避免怪异模式给我们带来不必要的麻烦,我们要养成书写 DTD 声明的好习惯。
3.3 IE 的 CSS hackCSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。
如:有个 div class=test,要求在 IE 6 下 width 为 60px,在 IE7 下 width 为 70px,在 IE 8 下 width 为 80px。
用样式属性前辍法:“_”只在 IE 6 下生效,“*”在 IE 6 和 IE 7 下生效3.4 png 图片IE 6 下对 png 的透明支持并不好,本该是透明的地方, 在 IE 6 下会显示为浅蓝色, 如下图所示:在 IE7、IE 8 和 Firefox 下的效果如图:可以使用 IE 下私有的滤镜功能来解决这个问题 <script language="JavaScript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { for(var j=0; j<document.images.length; j++) { var img = document.images[j]var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML j = j-1 } } } } window.attachEvent("onload", correctPNG); </script>3.5 透明度样式不同的浏览器实现透明的写法不一致。
常见浏览器兼容问题处理办法

常见浏览器兼容处理办法希望以兼容模式打开<metahttp-equiv="X-UA-Compatible"content="IE=8"><!--以IE8模式渲染--><metahttp-equiv="X-UA-Compatible"content="IE=7"><!--以IE7模式渲染-->EDGE 以最接近的新版本<metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">Js判断浏览器类型:浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%解决方案:CSS里*{margin:0;padding:0;}备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin 比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)解决方案:在float的标签样式控制中加入display:inline;将其转化为行内属性备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度碰到频率:60%解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
CSS各浏览器兼容问题整理

目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时,外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding,marign,height,width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题:详细查看•在属性前加下划线(_),那么此属性只会被IE6解释•在属性前加星号(*),此属性只会被IE7解释•在属性值后面加"\9",表示此属性只会被IE8解释各浏览器CSS hack兼容表:代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】:「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}(详细查看)2)区别IE6,IE7,IE8,FF【区别符号】:「*」、「_」、「!important」#tip{background:blue; /*Firefox背景变蓝色*/background:red\9; /*IE8背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
各个浏览器的兼容问题及样式兼容处理(不定期补充)

各个浏览器的兼容问题及样式兼容处理(不定期补充)遇到问样式兼容问题1:问题:⽕狐浏览器select下拉框选择后会出现⼀条虚线边框?解决⽅法:@-moz-document url-prefix() {select.form-control {-moz-appearance: none;appearance: none;background-image: url("http://221.228.109.114:8083/manage/more/firefox_select_icon.png");background-repeat: no-repeat;background-position: calc(100% - 7px) 50%;background-size: 2% auto;border-radius: 3px;padding: 0;}}问题:⽕狐浏览器select下拉框右侧的三⾓形下拉图标样式很丑,不是⾃⼰写的样式?解决办法:select {/*Chrome同Firefox与IE⾥⾯的右侧三⾓显⽰的样式不同*/border: solid 1px #ddd;/*将默认的select选择框样式清除*/appearance: none;-moz-appearance: none;-webkit-appearance: none;padding-right: 14px;/*如果要加⼊⾃定义图⽚,就增加这个属性 background: url或者在html中直接加⼊图标也⾏*/}/*清除iIE的默认选择框样式*/select::-ms-expand {display: none;}。
浏览器兼容性大全

浏览器兼容性浏览器的内核Mozilla Firefox ( Gecko )Internet Explorer ( Trident )Opera ( Presto )Safari ( WebKit )Google Chrome ( WebKit )腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳,不过如果电脑上装的是ie8的话,这些浏览器还是调用ie7的内核。
搜狗浏览器比较特殊,它有两种浏览模式:一是兼容模式,该模式使用IE内核;二是高速模式,该模式使用WebKit内核。
解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8一读到这个标签,它就会自动启动IE7兼容模式CSS Hack解决浏览器兼容性问题的主要方法是CSS hack。
由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。
我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox 两个都不能认识。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
各种浏览器兼容问题列表
1、仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。
其它浏览器不识别。
4、html/**/ >bod y select {…}
这句与上一句的作用相同。
5、仅IE6不识别,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别,屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
不屏蔽IE5.5
7、仅IE5不识别,屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。
只有IE5不识别,IE5.5可以识别。
8、盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。
这点要明确。
9、只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。
这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样
式。
1. 区别FF和IE
1-1
首先,当然是!important大法,可以提升指定样式规则的应用优先权,如下面的例子:
插入代码:
div{
background-color: red !important;
background-color: blue;
}
因为!important声明在IE6中并不是绝对的,它会被之后的同名属性定义所替换。
也就是说在上面的例子中,IE6所应用的是最后一个背景色的值,即“blue”;而在FF中背景色的值为“red”。
1-2
还有一种方法,就是IE浏览器可以识别“>”等一些符号,如“~”、“`”、“<”等,都只有IE可以识别,但是不合理,!important是符合标准的。
所以
插入代码:
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“>”,则应该得到的蓝色的背景,因此可以知道“>”只有IE可以识别。
这样,我们就可以把FF和IE的样式分离开。
下面就是解决IE自己的问题了。
2. 区别IE5.5和IE的其他版本
看一个例子:
插入代码:
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
这个例子使用了“>”,只有IE可以识别,在IE6中得到了黑色的背景;而在IE5.5中得到的绿色的背景;在IE5中也得到了黑色的背景。
这就说明了第二句定义只有IE5.5能识别,这是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了,那IE5呢?其实现在我们只要把IE5跟IE6分开就OK了。
3. 区别IE5与IE5.5+
插入代码:
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
这里我们又用到一个HACK,就是“div/**/{}”,这个定义在IE5以上的版本才能识别出来。
这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景。
4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。
来看个完整的例子:
插入代码:
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE5.5。
对于IE的定义在属性前要加“>”,因为“div/**/{}”这个HACK在FF中可以识别。