前端面试题兼容性及答案大全.docVIP

前端面试题兼容性及答案大全

一、单项选择题

1.以下哪个属性在IE6及以下版本浏览器不支持？

A.float

B.display

C.opacity

D.margin

答案：C。opacity属性用于设置元素的透明度，IE6及以下版本不支持该属性，通常需要使用滤镜来实现类似效果。

2.在处理不同浏览器的事件绑定差异时，以下哪种方式是正确处理IE和标准浏览器的方法？

A.使用addEventListener统一处理

B.先判断是否支持addEventListener，不支持则使用attachEvent

C.只使用attachEvent

D.只使用addEventListener

答案：B。addEventListener是标准浏览器的事件绑定方法，attachEvent是IE浏览器的事件绑定方法，为了兼容，需要先判断是否支持addEventListener，不支持则使用attachEvent。

3.以下哪种HTML标签在旧版本浏览器（如IE6）中可能会出现布局问题？

A.div

B.span

C.section

D.p

答案：C。section是HTML5新增的语义化标签，旧版本浏览器（如IE6）不认识该标签，可能会出现布局问题。

4.对于盒模型的理解，在IE6及以下怪异模式下，盒模型的宽度计算方式是？

A.width+padding+border

B.width

C.width+padding

D.width+border

答案：A。在IE6及以下怪异模式下，盒模型的宽度计算方式是width+padding+border，而标准模式下宽度就是width。

5.以下哪种方法可以解决图片在IE6下的双边距bug？

A.设置图片为display:block

B.设置图片为float:none

C.设置图片为position:relative

D.设置图片为z-index:1

答案：A。图片在IE6下设置浮动后会出现双边距bug，将图片设置为display:block可以解决该问题。

6.当需要在不同浏览器中实现渐变效果时，在IE浏览器中通常使用？

A.linear-gradient

B.-webkit-linear-gradient

C.filter

D.-moz-linear-gradient

答案：C。linear-gradient是标准的渐变属性，-webkit-linear-gradient是webkit内核浏览器的渐变属性，-moz-linear-gradient是火狐浏览器的渐变属性，在IE浏览器中通常使用filter来实现渐变效果。

7.以下哪个CSS选择器在IE6中不被支持？

A.a:hover

B.divp

C.id

D.div:first-child

答案：D。div:first-child是CSS3选择器，IE6不支持该选择器。

8.在处理跨域问题时，对于IE浏览器可以使用的方法是？

A.JSONP

B.CORS

C.代理服务器

D.以上都可以

答案：D。JSONP、CORS、代理服务器都可以处理跨域问题，对于IE浏览器，JSONP是比较常用的兼容方法，CORS在较新版本IE也支持，代理服务器则是通用的解决方案。

9.以下哪种情况在IE6中不会出现3像素间隙问题？

A.浮动元素和相邻的非浮动元素

B.内联元素和浮动元素

C.两个相邻的浮动元素

D.绝对定位元素和相邻元素

答案：D。3像素间隙问题通常出现在浮动元素和相邻的非浮动元素、内联元素和浮动元素、两个相邻的浮动元素之间，绝对定位元素和相邻元素一般不会出现该问题。

10.在IE6中，使用fixed定位会出现什么问题？

A.元素不能固定在页面某个位置

B.元素位置错乱

C.元素透明度异常

D.元素大小改变

答案：A。IE6不支持fixed定位，使用fixed定位时元素不能固定在页面某个位置。

二、多项选择题

1.以下哪些是常见的浏览器兼容性问题？

A.盒模型差异

B.事件绑定差异

C.字体显示差异

D.透明度支持差异

答案：ABCD。盒模型在标准模式和怪异模式下计算方式不同，不同浏览器事件绑定方法有差异，字体显示在不同浏览器可能有不同效果，透明度属性在不同浏览器支持情况也不同。

2.为了提高网站在不同浏览器的兼容性，可以采取以下哪些措施？

A.使用CSSReset

B.编写浏览器前缀

C.进行浏览器检测

D.使用HTML5Shiv

答案：ABCD。CSSReset可以统一不同浏览器的默认样式，编写浏览器前缀可以兼容不同浏览器的CSS属性，进