2016 - 2024

感恩一路有你

网页显示不能创建xmlhttprequest 前端面试的时候,问到兼容性问题怎么回答?

浏览量:2912 时间:2023-05-07 22:24:34 作者:采采

前端面试的时候,问到兼容性问题怎么回答?

不同浏览器的内核也可能不同,所以各个浏览器对网页的解析必然是有的差异。浏览器内核比较多两类两种,一是渲染引擎,那个是js引擎,内核极其倾向于说渲染引擎。最常见的一种的浏览器内核:

有所不同浏览器的默认样式必然差异,可以可以使用磨平这些差异。

1.不同浏览器的标签默认的外补丁和内补丁完全不同

问题症状:你随便写几个标签,不加样式操纵的情况下,各自的margin和padding差异减小。

遇到频率:100%

解决方案:CSS里*{margin:0padding:0}

备注:这个是最常见的也是也易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来系统设置各个标签的内外补丁是0。

2.块属性标签float后,又有横行的margin情况下,在IE6总是显示margin比可以设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

接触频率:90%(还好奇怪点的页面都会见到过,float布局最常见的浏览器不兼容问题)

解决方案:在float的标签样式再控制中参加display:inline将其能量转化为行内属性

备注:我们最常用的就是divCSS整个布局了,而div是两个是是的块属性标签,横向布局的时候我们正常情况都是用divfloat利用的,斜向的间距设置如果没有用margin实现程序,这那是一个必然会会见到过的兼容性问题。

3.设置较大高度标签(一般大于110px),在IE6,IE7,360急速中水平距离远远超过自己系统设置高度

问题症状:IE6、7和遨游里这个标签的高度不受操纵,远远超出自己设置的高度

出现频率:60%

解决方案:给远远超出垂直距离的标签设置中overflow:hidden的或设置中行高line-height小于等于你设置中的高度。

备注:那种情况好象出现在我们可以设置小圆角背景的标签里。再次出现这个问题的原因是IE8之前的浏览器都会给标签一个最大时设置的行高的高度。就算你的标签是空的,这个标签的高度那就会至少默认的行高。

4.行内属性标签,设置里display:block后采用pointer布局,又有划地为王的margin的情况,IE6间距bug

问题症状:IE6里的间距比将近设置中的间距

接触几率:20%

解决方案:在display:block后面加入到display:inlinedisplay:table

备注:行内属性标签,是为设置中宽高,我们要设置里display:block(除开input标签比较比较普通)。在用float布局并有纵向的margin后,在IE6下,他就具备了块属性float后的纵向margin的bug。不过毕竟它本身那就是行内属性标签,所以我们再另外display:inline的话,它的高宽就绝对不可设了。这时候我们还不需要在display:inline后面加入到display:talbe。

5.图片默认有间距

问题症状:几个upload标签装在一起的时候,有些浏览器会有默认的间距,加了问题一中说起的通配符也不起作用。

接触几率:20%

解决方案:在用float64属性为obj布局

备注:是因为img标签是行内属性标签,所以我只要不远远超过容器宽度,image2标签都会排在一行里,但部分浏览器的img标签之间会有个间距。去掉后这个间距可以使用float是正道。(我的一个学生在用负margin,虽说能帮忙解决,但负margin本身就是很难过多浏览器兼容问题的用法,所以才我私自他们不使用)

6.标签最低相同高度设置中min-height不不兼容

问题症状:而且min-height本身那就是一个不兼容性的CSS属性,因为系统设置min-height时不能不能很好的被各个浏览器兼容性问题

接触几率:5%

解决方案:假如我们要系统设置一个标签的最大时高度200px,需要并且的设置为:{min-height:200pxheight:auto!importantheight:200pxoverflow:visible}

备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的水平距离为300px;当内容水平距离小于这个值时,容器相同高度被撑高,而不是什么会出现滚动条。这时候我们可能会面队这个兼容性问题。

7.透明度的兼容性问题CSS设置

.transparent_class{filter:alpha(opacity50)-moz-opacity:0.5-khtml-opacity:0.5opacity:0.5}

假如我们熟得不能再熟标签的默认属性的话,就能很好的理解为什么不会直接出现兼容问题问题包括咋去解决的办法这些兼容性问题问题。

◆IE6见过的是下划线_和星号*

◆IE7火狐认识的是星号*

比如这样的一个CSS设置:

height:300px*height:200px_height:100pxIE6浏览器在读到height:300px的时候会以为高时300px;一直往外读,他也熟悉*heihgt,所以才当IE6读到*height:200px的时候会覆盖掉前一条的相无关设置里,以为水平距离是200px。再继续往下读,IE6还认识_height,所以才他又会瞬间覆盖掉200px高的设置,把相同高度可以设置为100px;

IE7和傲游确实是一样的从高度300px的设置往下读。当它们读到*200px200px的时候就停下来了,因为它们不认识_height。所以我它们会把一定高度解析为200px,剩的浏览器只不认识第一个height:300px所以我他们会把高度解析为300px。而且优先级完全相同且想的属性设置后三个会瞬间覆盖掉前一个,所以才抄写的次序是很最重要的。

双边距问题:在IE6中设置里了float,同样的又设置里margin,可能会会出现边距问题解决方案:设置中display:inline

9.当标签的相同高度设置大于010px,在IE6、IE7中会远远超出自己设置里的相同高度解决方案:超出水平距离的标签可以设置overflow:hidden,或则可以设置line-height的值小于你的设置高度

10.图片系统默认有间距解决方案:在用float为image2布局

看看浏览器不能不能建议使用opacity解决方案:opacity:0.5filter:alpha(opacity50)filter:(style0,opacity50)

12.边距相互缠绕问题;当相邻两个元素都可以设置了margin边距时,margin将取的最值,舍弃最小值;解决方案:就是为了不想边重叠,可以不给子元素增加一个父级元素,并设置中父级元素为overflow:hidden;

不显示手型在safari上不接受解决方案:统一使用cursor:pointer

14.两个块级元素,父元素设置中了overflow:auto;子元素设置里了position:relative且高度小于父元素,在IE6、IE7会被隐藏地而也不是泻出;解决方案:父级元素系统设置position:relative

背景闪烁不定的问题

问题:链接、选择按钮用以及背景,在下会有背景图闪烁不停的现象。原因是没有将背景图缓存,每次来能触发的时候都会重新运行

能解决:这个可以用系统设置缓存这些图片:

document.execCommand(BackgroundImageCache

JavaScript调用WebService的代码是什么呢?

WebService(以下3个字母为WS)不使用SOAP协议,而SOAPHTTPXML,所以才你可以不使用一切访问其它网页的方法来对WS接口接受内部函数。

一般情况下是可以建议使用三种方法:表单重新提交,XMLHttpRequest,jQuery.ajax。

其一,表单重新提交(严格的来说这个是HTML调用,属于什么JS动态链接库。。。)

标签 问题 浏览器 属性 IE6

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。