当前位置:首页 » 网页前端 » web前端的兼容性问题
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web前端的兼容性问题

发布时间: 2023-02-26 09:55:56

Ⅰ WEB前端开发跨平台和 ie 兼容性问题怎么能同时兼顾

前端代码标准这个是web兼容的王道 剩下的都是小细节问题
另外ie的开发者工具里包含了ie的各版本,调试的时候根据需要调到相应版本就行

Ⅱ web前端工程师工作中遇到难以解决的问题

1).margin-top,margin-bottom不能正常显示时
一.有时会遇到外层中的子层使用margin-top不管用的情况;这里我们需要在子层的前后加上一个
div{height:0;overflow:hidden;}

CSS样式表中:
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法:在P标签前后各加2个空的div:<divstyle="height:0;overflow:hidden"></div>
二.网页中头部,中部,底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
2).div层中高度自适应问题
网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
这时我们就不能规定div层的高度,为此应写成min-height:200px;height:auto!important;height:
200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了,这些在
http://www.xueshengshu.com/网站中用到最多了。
3).div层中子层的居底部对齐问题
div中的定位问题有很多也很麻烦,但弄懂了就OK了,在一个大的div层中如何让子层的内容居底部
对齐就涉及到了position定位问题;

div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近写的网站中http://www.msgc.net.cn/就用到了
4).div层中清除clear属性的一小部分应用
在div中一个大的层里面有很多子层,若是加上边框在ie7、ie6中或许会正常显示,但是在ff中可能
只会成一条线了,此时在最外层的后面加上<div style="clear:both"></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调用wrapfix;http://www.xueshengshu.com学生书网里用到最多了。
5).解决IE8下div移位、错位等兼容性问题
在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6).单行文字居中与字体样式问题
在div中一个层中只有一行文字,要让这层中的文字居中,可设line-height的高度和层的高度一样,注意这一层中的文字不能换行,此外,设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面,否则字体样式不显示文字也不居中;或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7).鼠标滑上去的特殊效果
往往为了达到显眼的效果,我们会写到一些好看的效果,方法一在样式表中写:ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二:在样式表中写上:.hover img{filter:alpha(opacity=40);}在div中调用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8).IE6中高度不对问题
今天在div中给定了高度为1px,其它浏览器显示正常,可是ie6中显示的高度就不对了,这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9).ul在外框里margin-top不起作用的问题
在div大框子里用了ul作导航的时候为了合ul层居中显示,设ul的样式表为margin-top:-15px不起作用了,此时应该将div大框设定高度后给个line-height与height一样的高度,ul层就自动居中了。
例如http://www.hopes-home.cn/main.aspx
10).ff中margin-top有时不起作用的问题
今天头晕脑涨的把这问题给解决了,这几天写标网都有累似问题,可是一直都是换个写法解决的,今天的这个办法也不只可行试试还是可以的,在一个div外框层中给个宽度例如,#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最后在这个div_center里套个ul li时经常会在ff中出问题,也就是在div_top与div_center中莫名的多了几个像素的空格,这时给ul样式表设个display:inline-table即可;

Ⅲ 想问下前端需要考虑的兼容性浏览器有哪些

一、浏览器的占有率:

ie6 - 30.23%
ie7 - 4.8%
ie8 - 30.6%
ie9 < 1%
chrome - 13.99%
firefox - 7.17%
safari ~ 5%
其他 ~ 8%
从数据上可以看出chrome + firefox + safari + ie9是高端浏览器,ie8勉强算准高端吧。这样这部分占有率约57%(如果加上其他webkit内核的浏览器会更高一些) 已经大于ie6 + ie7,但是IE6兼容性还是要解决。

二、web前端主要这些兼容浏览器:
1,firefox是开源的浏览器内核,插件很齐全,是代码人员的爱宠。

2、IE浏览器,要在Windows中开发适合自己的浏览器,很多人都在用。
推荐:ie8以上,360安全浏览器

3、Google浏览器,是谷歌公司开发的网页浏览器,稳定性和安全性很好。
推荐:Google Chrome

4、Opera12.17及更早版本曾经采用的内核是Presto,Opera15及以后的版本采用Blink的内核。用于手机代码测试也很方便。
推荐:Opera15

Ⅳ WEB前端浏览器兼容性问题(pc端及移动端)2021-02-03

1.当使用transform:translate3d(-50%,-50%,0)居中弹框(div)时,在pc端,内部的文字会模糊。
解决办法:给body定义样式

2.用position:absolute/fixed;把一个按钮固定在页面的底部,在android系统中,当调用输入法时,该按钮会被顶起

3.IOS系统调用第三方输入法时,系统无法监测到input的input、focus、change、blur事件

4.不同浏览器默认margin,padding不同。

5.不同浏览器的最小字体不同,有的是10px,有的是12px

6.透明度opacity

7.文字两端居中text-align:justify;text-align-last:just;在移动端不起作用

Ⅳ Web前端中常见的浏览器兼容问题有哪些

使用Trident内核的浏览器:IE、Maxthon、TT; 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox; 使用Presto内核的浏览器:Opera7及以上版本; 使用Webkit内核的浏览器:Safari、Chrome。
而我现在所说的兼容性问题,主要是说IE与几个主流浏览器如firefox,google等。而对IE浏览器来说,IE7又是个跨度,因为之前的版本更新甚慢,bug甚多。从IE8开始,IE浏览器渐渐遵循标准,到IE9后由于大家都一致认为标准很重要,可以说在兼容性上比较好了,但是在中国来说,由于xp的占有率问题,使用IE7以下的用户仍然很多,所以我们不得不考虑低版本浏览器的兼容。

对浏览器兼容问题,一般分,HTML,Javascript兼容,CSS兼容。 其中html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。特别是HTML5增加了许多新标签,低版本浏览器有点影响时代进步啊

问题一:不同浏览器的标签默认的外补丁和内补丁不同

  • 问题症状:随便写几个标签,不加样式控制的情况下,各自的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 小于你设置的高度。

  • 备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

  • 问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)

  • 问题症状:ie6里的间距比超过设置的间距

  • 碰到几率:20%

  • 解决方案:在display:block;后面加入display:inline;display:table;

  • 备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

  • 问题五:图片默认有间距

  • 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。

  • 碰到几率:20%

  • 解决方案:使用float属性为img布局

  • 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

  • 问题六:标签最低高度设置min-height不兼容

  • 问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容

  • 碰到几率:5%

  • 解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

  • 备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

  • 问题七:透明度的兼容css设置

  • 方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。1

  • 技巧一:css hack

    使用hacker 我可以把浏览器分为3类:ie6 ;ie7和遨游;其他(ie8 chrome ff safari opera等)

  • ie6认识的hacker 是下划线_ 和星号 *

  • ie7 遨游认识的hacker是星号 * (包括上面问题6中的 !important也算是hack的一种。不过实用性较小。)

  • 比如这样一个css设置 height:300px;*height:200px;_height:100px;ie6浏览器在读到 height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt, 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,ie6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;

  • ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px;

  • 剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。1234

  • 因为优先级相同且相冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

  • /* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/_color:red; /* 仅IE6 识别 */*color:red; /* IE6、IE7 识别 */+color:red; /* IE6、IE7 识别 */*+color:red; /* IE6、IE7 识别 */[color:red; /* IE6、IE7 识别 */ color:red9; /* IE6、IE7、IE8、IE9 识别 */color:red; /* IE8、IE9 识别*/color:red9; /* 仅IE9识别 */color:red ; /* 仅IE9识别 */color:red!important; /* IE6 不识别!important 有危险*//* CSS选择符级Hack */ *html #demo { color:red;} /* 仅IE6 识别 */*+html #demo { color:red;} /* 仅IE7 识别 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别

  • */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */:root #demo { color:red9; } : /* 仅IE9识别 */

  • 越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。这不多说,归结为到一定水平了,浮动会用的较少。另外,您也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。

    技巧二:padding,marign,height,width

    注意是技巧,不是方法: 写好标准头http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/1999/xhtml”>尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding

    技巧三:显示类(display:block,inline)

  • display:block,inline两个元素


  • display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效果display:table; //for FF,模拟table的效果1234567

  • display:block块元素,元素的特点是: 总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度

    display:inline就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。span,a,label,input,img,strong和em是 inline 元素的例子

    技巧四:怎样使一个div层居中于浏览器中?

    1)

  • <style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red; } --></style>12345678910111213141516171819

  • 2)div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;

    技巧五:float的div闭合;清除浮动;自适应高度

    ① 例如:<div id="floatA"><div id="floatB"><div id="NOTfloatC">

  • 这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

  • 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在<divclass="floatB"><div class="NOTfloatC">之间加上<div class="clear">这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:.clear{clear:both;}

  • ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义:

  • .colwrapper{overflow:hidden; zoom:1; margin:5px auto;}1

  • ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

  • <div id=”page”>


  • <div id=”left”></div>

  • <div id=”center”></div>

  • <div id=”right”></div>


  • </div>1234567

  • 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决:

  • <div id=”page”>


  • <div id=”bg” style=”float:left;width:100%”>


  • <div id=”left”></div>

  • <div id=”center”></div>

  • <div id=”right”></div>


  • </div>


  • </div>1234567891011

  • 再嵌入一个float left而宽度是100%的DIV解决之。

    ④万能float 闭合(非常重要!)

    关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽。

  • /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */1234567

  • 或者这样设置:.hackbox{display:table; //将对象作为块元素级的表格显示}

    技巧六:div嵌套时 y轴上 padding和 marign的问题

  • FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign

  • IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个

  • FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面

Ⅵ 前端面试题之解决浏览器兼容性的方案

浏览器兼容性涉及的内容有很多,特别是针对IE浏览器,以下整理出五种常见的浏览器兼容性解决方法。

一、样式初始化

由于各大浏览器会有自身的默认样式,并且不尽相同,所以为了尽可能的保证样式的统一性,前端在开发项目之前都会先进行样式格式化,最常见的分为以下几个方面。

1.pandding 值和 margin 值均设置为 0

将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

2.html 标签

设置统一的字体,如果使用 rem 单位,则 html 需要设置合适的字号。

3.a 标签

设置统一的颜色,将 text-decoration 属性设置为 none。

4.ol 和 li 标签

list-style 统一设置为 none。

5.input、textarea、select、button 等标签初始化

border 设置为 none;

根据需要设置颜色和背景色。

二、使用不同类型的浏览器内核前缀

1.Chrome(谷歌浏览器) 与 Safari(苹果浏览器) 内核:Webkit (中译无) 前缀:-webkit-

2.IE (IE浏览器) 内核:Trident (中译三叉戟) 前缀:-ms-

3.Firefox (火狐浏览器) 内核:Gecko(中译壁虎) 前缀:-moz-

4.Opera (欧朋浏览器) 内核:Presto(中译迅速) 前缀:-o-

例:

-webkit-border-radius: 10px; / 谷歌浏览器 /
-ms-border-radius: 10px; / IE浏览器 /
-moz-border-radius: 10px; / 火狐浏览器 /
-o-border-radius: 10px; / 欧朋浏览器 /
border-radius: 10px;
1
2
3
4
5
三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE 浏览器使用 CSS hack( 即给特点前缀)

注:以下符号是写在属性名前面。

兼容 IE6 的 hack 符号:- 或 _

兼容 IE6 、7 的 hack 符号:` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号

兼容 IE6、7、8 的 hack 符号:.

注:以下符号是写在属性值与分号直接,中间不留空格。

兼容 IE8 的 hack 符号:/

兼容 IE8、9、10 的 hack 符号:

兼容 IE6、7、8、9、10 的 hack 符号:9

例:

/ hack符号在前 /
_border-radius: 10px; / IE6 /
+border-radius: 10px; / IE67 /
.border-radius: 10px; / IE678 /

/ hack符号在后 /
border-radius: 10px/; / IE8 /
border-radius: 10px; / IE8910 /
border-radius: 10px9; / IE678910 /
1
2
3
4
5
6
7
8
9
2.为不同的版本编写独立的样式,其他浏览器识别不到。

例:大于 IE9 的浏览器使用这个单独的 style9.css 样式

1
2
3
例:只有 IE6 浏览器使用的 style6.css 样式

1
2
3
四、其他特殊样式

1.cursor 属性的 hand 值和 pointer 值

问题:firefox 浏览器不支持 hand 值,但其他浏览器均支持 pointer 值。
解决: 统一使用 cursor 属性的 pointer 值。

2.水平居中

问题:IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。

解决: 可通过设置父级 text-align:center 实现。

3.属性值 “inherit”

问题:IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。

解决:谨慎使用属性值 “inherit”。

五、JS兼容性

1.ES6语法

问题:IE11 不支持箭头函数、class 语法等(报 SCRIPT1002: 语法错误),不支持 Set 和 Map 数据结构(不报错)及 Promise 对象,支持 let 和 const,IE10 及以下不支持任何 ES6 语法。

解决:如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

2.操作 tr 标签

问题:IE9 及 IE9 以下版本浏览器,不能操作 tr 标签的 innerHTML 属性。

解决:可以操作 td 标签的 innerHTML 属性。

3.Ajax

问题:IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。

解决:在使用 Ajax 请求之前设置 jQuery.support.cors=true。

4.event 对象的 srcElement 属性

问题:IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性,没有 target 属性。

解决:obj = event.target?event.target:event.srcElement。

5.DOM 事件绑定

问题:IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法,而其他浏览器是 addEventListener() 方法。

解决:判断 IE 浏览器版本,如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法,注意 attachEvent() 方法的用法,第一个参数为“onclick” 而不是“click”。并且没有第三个参数。

Ⅶ web前端的移动端的兼容性问题怎么解决

//兼容IE浏览器的
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//兼容移动端的
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//html5.shiv兼容不支持html5 的

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
一般在head中添加这几个之后,移动端就没有什么大问题了,希望对你有帮助,望采纳!

Ⅷ 前端开发常见的兼容性问题及解决方案

解决方法:给input增加样式

使用这两个样式布局的时候
会出现 中间有空白的情况

解决办法是 给他们的父级设置 font-size:0

1.给父级元素设置

2.给父级样式设置

示例

3.添加空div
然后给空div设置

请参考笔记 ,奇怪的 && 和 ||
当两个值都为布尔值的时候 会返回布尔值
但是 两个都是变量的时候 会返回后面那个变量的值 这是非常奇怪的

去掉苹果手机默认的按钮样式

注意手机阻止默认事件,不可以加到某一个层上面
需要加到全局document上,确实非常的坑爹

另外,使用classList.contains("class") 可以检查元素是否拥有某样式

给左边的图片设置vertical-align:top
然后使用padding-top的方式去布局就不会左右不对称了
这种情况是图片和行高的大小差不多的情况 即 图片大于文字的大小

如果图片比文字小就需要使用vertical-align:middle去布局了

internet explorer -- Trident
Mozilla Firefox -- Gecko
opera -- Presto
safari / chrome -- WebKit