前端開發(fā)瀏覽器兼容試題及答案

前端開發(fā)瀏覽器兼容試題及答案前端開發(fā)瀏覽器兼容試題及答案一、選擇題題目1：在CSS中，以下哪個屬性在IE8瀏覽器中不被支持A.border-radiusB.opacityC.box-shadowD.display:flex答案：A題目2：關(guān)于HTML5新標(biāo)簽的瀏覽器兼容性說法正確的是A.所有瀏覽器都原生支持所有HTML5標(biāo)簽B.IE8及以下版本完全不支持HTML5新標(biāo)簽C.只有Chrome瀏覽器支持HTML5D.HTML5標(biāo)簽在所有移動瀏覽器中都支持答案：B題目3：在JavaScript中，獲取DOM元素的方法哪個在IE6中不支持A.getElementByIdB.getElementsByTagNameC.querySelectorD.getElementsByClassName答案：C題目4：以下哪個CSShack是針對IE6的A.*htmlB._propertyC.-ms-D.-webkit-答案：A題目5：在處理透明背景時，IE8瀏覽器支持的方法是A.opacityB.rgbaC.filter:alpha(opacity=80)D.transparent答案：C題目6：關(guān)于flexbox布局的瀏覽器兼容性，正確的是A.2009版語法在所有現(xiàn)代瀏覽器中都支持B.2012版語法需要加-ms-前綴C.最新語法在IE11中完全支持D.flex布局在所有版本的IE中都不支持答案：B題目7：以下哪個事件在IE瀏覽器中需要使用attachEventA.clickB.mouseoverC.addEventListenerD.load答案：C題目8：關(guān)于CSS3動畫的兼容性，說法正確的是A.Chrome瀏覽器需要加-moz-前綴B.Safari瀏覽器需要加-webkit-前綴C.IE10以下都支持CSS3動畫D.Firefox瀏覽器不需要任何前綴答案：B題目9：在處理跨瀏覽器表單驗證時，以下哪個是HTML5新增的驗證屬性A.validateB.requiredC.checkD.verify答案：B題目10：關(guān)于JSON的瀏覽器兼容性，正確的是A.IE7及以下版本原生支持JSON對象B.JSON.parse在IE8中完全支持C.所有瀏覽器都原生支持JSOND.JSON.stringify在IE7中可用答案：B二、填空題題目1：在IE瀏覽器中用于條件注釋的語法是____答案：<!--[ifIE]>題目2：CSS中用于清除浮動的兼容寫法是____答案：clearfix題目3：處理IE6雙邊距問題的CSS屬性是____答案：display:inline題目4：讓IE8支持HTML5新標(biāo)簽需要引入的腳本是____答案：html5.js題目5：檢測瀏覽器類型的JavaScript對象是____答案：navigator題目6：CSSreset的主要作用是____答案：統(tǒng)一不同瀏覽器的默認(rèn)樣式題目7：移動端meta視口標(biāo)簽的名稱是____答案：viewport題目8：WebSocket在IE10以下的瀏覽器____答案：不支持題目9：localStorage在IE7及以下版本____答案：不支持題目10：CSS3的transform屬性在IE9中____答案：部分支持三、判斷題題目1：IE6瀏覽器已經(jīng)完全退出市場，不需要再考慮兼容性問題答案：錯誤題目2：CSShack是一種利用瀏覽器bug來實現(xiàn)兼容性的技術(shù)答案：正確題目3：Modernizr庫可以檢測瀏覽器對HTML5和CSS3特性的支持情況答案：正確題目4：使用CSS前綴可以確保新屬性在大多數(shù)瀏覽器中正常工作答案：正確題目5：Polyfill可以讓舊瀏覽器支持新特性答案：正確題目6：Chrome和Firefox對CSS3的支持完全一致答案：錯誤題目7：IE11瀏覽器已經(jīng)完全支持ES6語法答案：錯誤題目8：使用normalize.css比使用CSSreset更好答案：正確題目9：移動端瀏覽器不需要考慮兼容性答案：錯誤題目10：漸進(jìn)增強(qiáng)是一種推薦的網(wǎng)頁開發(fā)策略答案：正確四、簡答題題目1：請說明CSS中clearfix的原理和兼容寫法答案：clearfix的原理是通過偽元素::after在浮動元素后添加一個清除浮動的塊級元素。兼容寫法需要在::after偽元素中設(shè)置content為空、display為block、clear為both。對于IE6和IE7，需要在父元素上添加zoom:1觸發(fā)hasLayout。題目2：請說明處理瀏覽器兼容性的一般步驟答案：第一步是確定目標(biāo)瀏覽器范圍，第二步是使用特性檢測而非瀏覽器檢測，第三步是使用CSS前綴處理新屬性，第四步是使用polyfill填充舊瀏覽器，第五步是進(jìn)行測試驗證。題目3：請說明漸進(jìn)增強(qiáng)和優(yōu)雅降級的區(qū)別答案：漸進(jìn)增強(qiáng)是從基礎(chǔ)功能開始，逐步為現(xiàn)代瀏覽器增加增強(qiáng)功能。優(yōu)雅降級是先構(gòu)建完整功能，再為舊瀏覽器提供降級方案。漸進(jìn)增強(qiáng)更適合復(fù)雜應(yīng)用，優(yōu)雅降級適合簡單頁面。題目4：請說明如何檢測瀏覽器是否支持某個CSS屬性答案：可以使用JavaScript的CSS.supports()方法，或者使用Modernizr庫，也可以在CSS中通過@supports規(guī)則檢測，還可以通過創(chuàng)建測試元素并檢查特定屬性值來判斷。題目5：請說明IE瀏覽器的hasLayout是什么以及如何觸發(fā)答案：hasLayout是IE瀏覽器的一個內(nèi)部屬性，元素獲得layout后會調(diào)整自身尺寸和位置。觸發(fā)hasLayout的方式包括設(shè)置width、height、float、position:absolute、zoom等屬性，以及使用display:inline-block。五、代碼題題目1：請寫出兼容所有瀏覽器的透明背景代碼答案：.transparent{background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);zoom:1;}題目2：請寫出兼容IE6的最小高度代碼答案：.min-height{min-height:200px;_height:200px;}題目3：請寫出兼容各瀏覽器的圓角代碼答案：.border-radius{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}題目4：請寫出兼容各瀏覽器的盒陰影代碼答案：.box-shadow{-webkit-box-shadow:0010pxrgba(0,0,0,0.5);-moz-box-shadow:0010pxrgba(0,0,0,0.5);box-shadow:0010pxrgba(0,0,0,0.5);}題目5：請寫出兼容各瀏覽器的Flex布局代碼答案：.flex-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}題目6：請寫出兼容各瀏覽器的居中定位代碼答案：.center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}題目7：請寫出兼容各瀏覽器的文字省略號代碼答案：.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}題目8：請寫出兼容各瀏覽器的事件綁定代碼答案：functionaddEvent(element,event,handler){if(element.addEventListener){element.addEventListener(event,handler,false);}elseif(element.attachEvent){element.attachEvent('on'+event,handler);}else{element['on'+event]=handler;}}題目9：請寫出兼容各瀏覽器的AJAX代碼答案：functionajax(url,callback){varxhr;if(window.XMLHttpRequest){xhr=newXMLHttpRequest();}else{xhr=newActiveXObject('Microsoft.XMLHTTP');}xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){callback(xhr.responseText);}};xhr.open(