瀏覽器兼容性

一媳友,如何調試 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-widthmax-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.cssnormalize.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和邊框都在盒子內進行改變姓惑。通過從已設定的寬度和高度中分別減去邊框和內邊距才能得到內容的寬度和高度褐奴。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市于毙,隨后出現的幾起案子敦冬,更是在濱河造成了極大的恐慌,老刑警劉巖唯沮,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件脖旱,死亡現場離奇詭異,居然都是意外死亡介蛉,警方通過查閱死者的電腦和手機萌庆,發(fā)現死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來币旧,“玉大人践险,你說我怎么就攤上這事〈盗猓” “怎么了巍虫?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鳍刷。 經常有香客問我占遥,道長,這世上最難降的妖魔是什么输瓜? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任瓦胎,我火速辦了婚禮芬萍,結果婚禮上,老公的妹妹穿的比我還像新娘凛捏。我一直安慰自己担忧,他們只是感情好,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布坯癣。 她就那樣靜靜地躺著瓶盛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪示罗。 梳的紋絲不亂的頭發(fā)上惩猫,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天,我揣著相機與錄音蚜点,去河邊找鬼轧房。 笑死,一個胖子當著我的面吹牛绍绘,可吹牛的內容都是我干的奶镶。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼陪拘,長吁一口氣:“原來是場噩夢啊……” “哼厂镇!你這毒婦竟也來了?” 一聲冷哼從身側響起左刽,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤捺信,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后欠痴,有當地人在樹林里發(fā)現了一具尸體迄靠,經...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年喇辽,在試婚紗的時候發(fā)現自己被綠了掌挚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡菩咨,死狀恐怖疫诽,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情旦委,我是刑警寧澤,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布雏亚,位于F島的核電站缨硝,受9級特大地震影響,放射性物質發(fā)生泄漏罢低。R本人自食惡果不足惜查辩,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一胖笛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宜岛,春花似錦长踊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至列敲,卻和暖如春阱佛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背戴而。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工凑术, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人所意。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓淮逊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親扶踊。 傳聞我的和親對象是個殘疾皇子泄鹏,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內容

  • 1.什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozi...
    Feiyu_有貓病閱讀 517評論 0 2
  • 瀏覽器兼容性探討 關于瀏覽器兼容的大致思路 首先要考慮的就是有沒有必要做產品的角度(產品的受眾姻檀、受眾的瀏覽器比例命满、...
    曉風殘月1994閱讀 226評論 0 0
  • 序章 談談“瀏覽器兼容性”的問題杂抽?很多前端的面試或筆試中诈唬,都有比較籠統(tǒng)的“說說你所知道的各瀏覽器存在的兼容問題”,...
    麻辣小隔壁閱讀 3,042評論 1 57
  • 什么是 CSS hack 由于不同廠商的瀏覽器缩麸,比如Internet Explorer,Safari,Mozill...
    饑人谷_saybye閱讀 205評論 0 0
  • 作字小作人铸磅,人奇字自古。 綱常判周孔杭朱,筆墨不可補阅仔。 寧拙毋巧,寧丑毋媚弧械,寧支離毋輕滑八酒,寧真率毋安排。
    上古天真唐閱讀 1,407評論 0 0