一媳友,如何調試 IE 瀏覽器
答:
1.使用高版本IE控制臺;
2.border: 1px solid red
(特別針對于IE6)靶橱,或者outline: 1px solid red
(效果比border好,沒有副作用);
3.IE test 等常用IE測試軟件;
4.虛擬機拱镐,直接在IE對應的版本打開測試;
5.javascript(在IE里面執(zhí)行JS持际,在JS里面寫樣式進行調試)沃琅;
6.http://fts.aliyun.com/ (阿里云前端瀏覽器測試)
二,什么是CSS hack蜘欲?在 CSS 和 HTML里如何寫 hack益眉?在 CSS 中 ie6、ie7的 hack 方式姥份?
答:
1.為了獲得統(tǒng)一的頁面效果郭脂,針對不同的瀏覽器/不同版本寫相應的CSS code的過程,叫做CSS hack澈歉。
2.三種hack寫法:1)css屬性前綴法 2)選擇器前綴法 3)IE條件注釋(即HTML頭部引用if IE).
詳解:
1.屬性前綴法:
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴展鸡,以達到預期的頁面展現效果。
例如 IE6能識別下劃線_
和星號*
埃难,IE7能識別星號*
莹弊,但不能識別下劃線_
,IE6~IE10都認識\9
涡尘,但firefox前述三個都不能認識.
例如:*background-color:black; /* IE6, IE7 */
只對IE6 IE7有效忍弛。
2.選擇器前綴法:
選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack考抄。
例如:
*html *前綴只對IE6生效 *+html *+前綴只對IE7生效
3.條件注釋法
這種方式是IE瀏覽器專有的Hack方式细疚,微軟官方推薦使用的hack方式。
例如:
只在IE下生效<!--[if IE]>這段文字只在IE瀏覽器顯示<![endif]-->
只在IE6下生效<!--[if IE 6]>這段文字只在IE6瀏覽器顯示<![endif]-->
只在IE6以上版本生效<!--[if gte IE 6]>這段文字只在IE6以上(包括)版本IE瀏覽器顯示<![endif]-->
只在IE8上不生效<!--[if ! IE 8]>這段文字在非IE8瀏覽器顯示<![endif]-->
非IE瀏覽器生效<!--[if !IE]>這段文字只在非IE瀏覽器顯示<![endif]-->
參考資料
史上最全的CSS hack方式一覽
browserhacks
三川梅,列舉幾種 瀏覽器兼容問題
答:
1.inline-block
在IE6和IE7不支持疯兼,解決方式 {display:inline; zoom:1}
2.opacity
透明度在IE8以下不支持,解決方式filter:alpha(opacity=50)
3.IE8以下版本的瀏覽器不支持min-width
和max-width
屬性挑势;解決方法:直接寫死镇防。
四,針對兼容潮饱、多瀏覽器覆蓋有什么看法来氧?漸進增強和優(yōu)雅降級是什么意思?
答:
每個瀏覽器的兼容性(渲染標準)不同,不存在完美兼容的啦扬,應該根據項目的數據調研中狂,根據市場和用戶定位,決定兼容的程度扑毡。
多瀏覽器兼容覆蓋的思路
1.根據調查數據決定是否兼容胃榕,如果是,則先看IE瞄摊,
2.看看網頁在IE是否出現問題
3.利用caniuse查看到底哪個屬性沒有兼容
4.通過搜索引擎查看解決該問題的方案
5.如果通過CSS無法解決問題,那么就用JS
漸進增強(progressive enhancement)針對低版本瀏覽器進行構建頁面勋又,保證最基本的功能,然后再針對高級瀏覽器進行改進和完善以達到更好的用戶體驗换帜。
優(yōu)雅降級(graceful degradation)一開始就構建完整的功能楔壤,然后再針對低版本瀏覽器進行兼容(打補丁)惯驼,確保低版本瀏覽器可用蹲嚣。
區(qū)別:優(yōu)雅降級是從復雜的現狀開始,并試圖減少用戶體驗的供給祟牲,而漸進增強則是從一個非诚缎螅基礎的,能夠起作用的版本開始说贝,并不斷擴充议惰,以適應未來環(huán)境的需要。
降級(功能衰減)意味著往回看狂丝;而漸進增強則意味著朝前看换淆,同時保證其根基處于安全地帶。
參考資料優(yōu)雅降級和漸進增強
五几颜,reset.css
和normalize.css
分別是做什么的?為什么推薦使用 nomalize.css
?
答:reset.css直接重置瀏覽器默認的樣式讯屈,demo(*{ margin:0; padding:0; })
normalize.css
是一種CSS reset的改進方案蛋哭,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。支持包括手機瀏覽器在內的超多瀏覽器涮母,同時對HTML5元素谆趾、排版、列表叛本、嵌入的內容沪蓬、表單和表格都進行了一般化。相比于傳統(tǒng)的CSS reset来候,Normalize.css是一種現代的跷叉、為HTML5準備的優(yōu)質替代方案。
為什么推薦使用normalize.css
1.保護有用的瀏覽器默認樣式而不是完全去掉它們一般化的樣式:
2.為大部分HTML元素提供修復瀏覽器自身的bug并保證各瀏覽器的一致性優(yōu)化CSS可用性:
3.用一些小技巧解釋代碼:
4.Normalize.css 是模塊化的,可以自定義設計云挟。
5.有注釋和詳細的文檔
如何使用 normalize.css
首先梆砸,安裝或從Github下載Normalize.css,接下來有兩種主要途徑去使用它园欣。
策略一:將normalize.css作為你自己項目的基礎CSS帖世,自定義樣式值以滿足設計師的需求。
策略二:引入normalize.css源碼并在此基礎上構建沸枯,在必要的時候用你自己寫的CSS覆蓋默認值日矫。
相關閱讀
Normalize.css
六、IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么绑榴?
答:
1.ie678(不添加 doctype)使用 ie 盒模型哪轿,寬度=邊框+padding+內容寬度;
2.ie678(添加doctype
)則使用W3C標準盒模型, 寬度= 內容寬度;
3.IE678 添加doctype
使用標準盒模型
4.box-sizing:border-box
是CSS3的新屬性彭沼,作用是先固定盒子大械薰洹;然后任何padding和邊框都在盒子內進行改變姓惑。通過從已設定的寬度和高度中分別減去邊框和內邊距才能得到內容的寬度和高度褐奴。