1.
你能描述一下漸進增強和優雅降級之間的不同嗎
?定義
:優雅降級(
graceful degradation):
一開始就構建站點的完整功能,然後針對瀏覽器測試和修復
漸進增強(
progressive enhancement):
一開始只構建站點的最少特性,然後不斷針對各瀏覽器追加功能。
都關注於同一**在不同裝置裡不同瀏覽器下的表現程度
區別
:「優雅降級
」觀點認為應該針對那些最高端、最完善的瀏覽器來設計**
. 而將那些被認為「過時
」或有功能缺失的瀏覽器下的測試工作安排在開發周期的最後階段,並把測試物件限定為主流瀏覽器(如ie、
mozilla
等)的前乙個版本。
「漸進增強
」觀點則認為應關注於內容本身。請注意其中的差別:我甚至連
「瀏覽器
」三個字都沒提。
理解
:"優雅降級
"就是首先完整地實現整個**
,包括其中的功能和效果
. 然後再為那些無法支援所有功能的瀏覽器增加候選方案
, 使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效."
漸進增強
"則是從瀏覽器支援的基本功能開始
, 首先為所有裝置準備好清晰且語義化的
html
及完整內容
, 然後再以無侵入的方法向頁面增加無害於基礎瀏覽器的額外樣式和功能
. 當瀏覽器公升級時
, 它們會自動呈現並發揮作用
.2.
瀏覽器相容問題
:問題
1不同瀏覽器的標籤預設的外補丁和內補丁不同
.即隨便寫幾個標籤
, 在不加樣式控制的情況下
, 各自的
margin
和padding
差異較大
.解決方法
: ccs
裡: *
問題
2塊屬性標籤
float
後,又有橫行的
margin
情況下,在
ie6顯示
margin
比設定的大
會使得ie6
後面的一塊被頂到下一行
.解決方案: 在
float
的標籤樣式中加入
display: inline;
將其轉化為行內屬性
問題
3設定較小高度標籤(一般小於
10px
),在ie6
,ie7
,遨遊中高度超出自己設定高度
ie6、
7和遨遊裡這個標籤的高度不受控制,超出自己設定的高度
解決方案
: 給超出高度的標籤設定
overflow:hidden;
或者設定行高
line-height
小於你設定的高度
原因: ie8
之前的瀏覽器都會給標籤乙個最小預設的行高的高度
. 即使標籤是空的
,這個標籤的高度還是會達到預設的行高
.問題
4行內屬性標籤,設定
display:block
後採用float
布局,又有橫行的
margin
的情況,
ie6間距
bug解決: 在
display:block;
後面加入
display:inline;display:table;
問題
5預設有間距
幾個img
標籤放在一起的時候,有些瀏覽器會有預設的間距,加了問題一中提到的萬用字元也不起作用。
解決:
使用float
屬性為img
布局問題
6標籤最低高度設定
min-height
不相容因為
min-height
本身就是乙個不相容的
css屬性,所以設定
min-height
時不能很好的被各個瀏覽器相容
如果我們要設定乙個標籤的最小高度
200px
,需要進行的設定為:
問題
7透明度的相容
css設定
使用hacker
ie6認識的
hacker
是下劃線_和
*ie7,
遨遊認識的
hacker是*
問題
8ieol
的序號全為
1, 不遞增
解決: li
設定樣式
問題
9ie6,7
不支援display:inline-block
解決方法
: 設定
inline
並觸法haslayout
display:inline-block; *display:inline; *zoom:1
需要web
前端課程工具和電子書,可以加
: 33
群105601600(22
前端面試題整理
從瀏覽器位址列輸入url到顯示頁面的步驟 以http為例 在瀏覽器位址列輸入url 瀏覽器檢視快取,如果請求資源在快取中並且新鮮,跳轉到轉碼步驟 如果資源未快取,發起新請求 如果已快取,檢驗是否足夠新鮮,足夠新鮮直接提供給客戶端,否則與伺服器進行驗證。檢驗新鮮通常有兩個http頭進行控制expire...
前端面試題整理
1.html5的新特性。主要講講新增哪些api 地理定位,拖放,web儲存應用快取,webworkers,sse 2.css3的新特性。3 使用嚴格模式的限制有哪些。4 什麼是同源?什麼情況下就屬於跨域?怎麼解決跨域說出三種以上的方法,jsonp原理是什麼。同源 協議,網域名稱,埠相同 方法一 co...
前端面試題整理
js 1 ajax 原理 ajax的基本原理總結 2 原型和原型鏈 原型和原型鏈 3 深拷貝淺拷貝 js的深拷貝和淺拷貝 4 繼承有幾種方式 js繼承的幾種方式 5 閉包 js閉包 6 阻止事件冒泡,和預設事件 阻止事件冒泡,阻止預設事件 7 陣列去重 物件去重 8 陣列有哪些方法 9 promis...