任務十三-瀏覽器兼容

1.如何調試 IE 瀏覽器

答:

  • 高版本的IE(7以上)存在開發(fā)者工具氛什,可以直接使用調試。
  • 可以安裝虛擬機再安裝不同版本的IE去調試
  • 在CSS中使用border: 1px solid red;outline:1px solid red;顯示盒模型調試
  • 用IETest調試素挽,模擬不同版本的IE瀏覽器

2.什么是CSS hack?在 CSS 和 HTML里如何寫 hack狸驳?在 CSS 中 ie6预明、ie7的 hack 方式?

答:

CSS hack是通過在CSS樣式中加入一些特殊的符號耙箍,讓不同的瀏覽器識別不同的符號(什么樣的瀏覽器識別什么樣的符號是有標準的撰糠,CSS hack就是讓你記住這個標準),以達到應用不同的CSS樣式的目的辩昆。

  • 條件注釋法:在HTML中做更改阅酪。
    在IE中生效;在IE6生效;
    ``````在IE7生效遮斥;
  • 屬性前綴法(即類內部Hack): IE6能識別下劃線""和星號" * "峦失,IE7能識別星號" * ",但不能識別下劃線""术吗,IE6~IE10都認識"\9"尉辑,但firefox前述三個都不能認識。
    IE6:
.box{
_background:yellow;}```
IE7:

.box{
*background:yellow;}```

  • 選擇器前綴法(即選擇器Hack):例如 IE6能識別html .class{}较屿,IE7能識別+html .class{}或者*:first-child+html .class{}隧魄。
*html .box {
 background: yellow;
}```

####3.列舉幾種 瀏覽器兼容問題
答:
* ```display:inline-block;``` 對塊級元素設置這個屬性的時候隘蝎,IE67是不支持的购啄,需要如下語句:

*display:inline;
*zoom:1;```

  • opacity:0.8;常用CSS3屬性調節(jié)透明度,這個不被IE8以下支持嘱么。所以需要:
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60);   /* IE 4-7 */
zoom: 1;  ```

####4.針對兼容狮含、多瀏覽器覆蓋有什么看法?**漸進增強**和**優(yōu)雅降級**是什么意思曼振?
答:一般來講几迄,如果有超過一定百分比的人數(shù)使用某個瀏覽器,我們在設計頁面時候就要考慮到此瀏覽器的兼容問題冰评。主要就是IE678映胁,火狐和谷歌瀏覽器。先盡量寫代碼甲雅,如果月到一些問題可以用審查工具去看具體哪有問題解孙,配合CANIUSE的網(wǎng)站查詢兼容情況,再酌情進行修改抛人。
* 漸進增強:是指在渲染的時候先以低版本的基礎頁面為主弛姜,保證基本功能,之后再針對高版本瀏覽器中的功能屬性渲染妖枚,改進等娱据。
* 優(yōu)雅降級:與上者剛好相反,是指直接渲染網(wǎng)站所有功能盅惜,再對低版本的瀏覽器進行兼容中剩。


####5.reset.css和normalize.css分別是做什么的?為什么推薦使用 nomalize.css?
答:
>在HTML標簽在瀏覽器里有默認的樣式抒寂,在切換頁面的時候默認樣式往往會給我們帶來麻煩结啼,影響開發(fā)效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉屈芜,更準確說就是通過重新定義標簽樣式郊愧∑右耄“覆蓋”瀏覽器的CSS默認屬性。最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉,這就是CSS reset属铁。

而相對于resset.css來說眠寿,normalize.css更加柔和保留一些比較通用的瀏覽器默認樣式而不是生硬的全部去掉它們,比較講究通用和可維護性焦蘑,并且修復了常見的瀏覽器Bug盯拱。所以reset用起來的時候影響的范圍很大,后者在Reset 的基礎上給一些有特殊意義的標簽加上默認樣式例嘱,所以較為推薦后者狡逢。

>1. Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式,強行使得元素有相同的視覺效果拼卵。相比之下奢浑,Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設置樣式腋腮。當一個元素在不同的瀏覽器中有不同的默認值時雀彼,Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標準相符合。
2. Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug即寡。這往往超出了Reset所能做到的范疇徊哑。關于這一點,Normalize.css修復的問題包含了HTML5元素的顯示設置嘿悬、預格式化文字的font-size問題、在IE9中SVG的溢出水泉、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關的bug善涨。
3. Normalize.css 不會讓你的調試工具變的雜亂
使用Reset最讓人困擾的地方莫過于在瀏覽器調試工具中大段大段的繼承鏈,如下圖所示草则。在Normalize.css中就不會有這樣的問題钢拧,因為在我們的準則中對多選擇器的使用時非常謹慎的,我們僅會有目的地對目標元素設置樣式炕横。
4. Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關卻又獨立的部分源内,這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分(比如表單的一般化)份殿。
5. Normalize.css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試膜钓。


####6.IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用?
答:
* IE盒模型寫出來的寬高是包括內容content和margin兩者的卿嘲。而這里的content也含有border和padding颂斜。
* W3C標準盒模型是寫出來的寬高就是內容本身,我們可以在樣式里在對Margin拾枣,padding沃疮,border進行定義盒让。
在IE678中添加DOCTYPE聲明即可遵循標準盒模型,添加box-sizing:border-box這個屬性即可以按IE盒模型來設定盒子寬高(把邊框和內邊距放在同一個外邊框里)司蔬。

####7.在 ie 6, 7, 8中展示 **盒模型**邑茄、**inline-block**、**max-width**的區(qū)別?
答:
* 盒模型

<style>
.block{
width:100px;
height:100px;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="block"></div>
</body>```
經(jīng)測試俊啼,IE678在盒模型無差異均為下圖所示肺缕。


IE6,7吨些,8
  • inline-block
    在IE67中不支持inline-block搓谆,IE8可以。


    IE6,7
IE8
  • max-width:
  <style>
    .block1{
      max-width:200px;
      height:100px;
      border:5px solid blue;
    }
  </style> 
</head>
<body>
  <div class="block1"></div>  
</body>```
![IE7,8](http://upload-images.jianshu.io/upload_images/2349092-58ad8a38d85bf716.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![IE6](http://upload-images.jianshu.io/upload_images/2349092-1988082fa2ea1b60.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***
****本文版權歸饑人谷_鬼腳七和饑人谷所有豪墅,轉載請注明來源泉手。****
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市偶器,隨后出現(xiàn)的幾起案子斩萌,更是在濱河造成了極大的恐慌,老刑警劉巖屏轰,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颊郎,死亡現(xiàn)場離奇詭異,居然都是意外死亡霎苗,警方通過查閱死者的電腦和手機姆吭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唁盏,“玉大人内狸,你說我怎么就攤上這事±謇蓿” “怎么了昆淡?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長刽严。 經(jīng)常有香客問我昂灵,道長,這世上最難降的妖魔是什么舞萄? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任眨补,我火速辦了婚禮,結果婚禮上倒脓,老公的妹妹穿的比我還像新娘渤涌。我一直安慰自己,他們只是感情好把还,可當我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布实蓬。 她就那樣靜靜地躺著茸俭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪安皱。 梳的紋絲不亂的頭發(fā)上调鬓,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天,我揣著相機與錄音酌伊,去河邊找鬼腾窝。 笑死,一個胖子當著我的面吹牛居砖,可吹牛的內容都是我干的虹脯。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼奏候,長吁一口氣:“原來是場噩夢啊……” “哼循集!你這毒婦竟也來了?” 一聲冷哼從身側響起蔗草,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤咒彤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后咒精,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體镶柱,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年模叙,在試婚紗的時候發(fā)現(xiàn)自己被綠了歇拆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡范咨,死狀恐怖故觅,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情湖蜕,我是刑警寧澤逻卖,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布宋列,位于F島的核電站昭抒,受9級特大地震影響,放射性物質發(fā)生泄漏炼杖。R本人自食惡果不足惜灭返,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望坤邪。 院中可真熱鬧熙含,春花似錦、人聲如沸艇纺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蚓聘,卻和暖如春腌乡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背夜牡。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工与纽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人塘装。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓急迂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蹦肴。 傳聞我的和親對象是個殘疾皇子僚碎,可洞房花燭夜當晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內容

  • 一、如何調試 IE 瀏覽器冗尤? 在IE7以上的版本中可以通過按快捷鍵F12調出開發(fā)人員調試框听盖,如下圖IE7以上調試工...
    dengpan閱讀 548評論 0 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,751評論 1 92
  • 一裂七、問答部分 1. 如何調試 IE 瀏覽器 IE7及以上版本有調試臺皆看,可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 464評論 0 1
  • 一背零、問答部分: 1. 如何調試 IE 瀏覽器? 如果是IE7版本以上可以使用自帶的開發(fā)者工具腰吟,按F12,即可打開:...
    小木子2016閱讀 532評論 0 0
  • 1.如何調試IE瀏覽器? 對于高版本的IE瀏覽器(IE7以上)可以使用IE自帶的開發(fā)者工具徙瓶,如下圖: 使用一些集成...
    饑人谷_任磊閱讀 366評論 0 1