任務(wù)13

1.如何調(diào)試 IE 瀏覽器?

答:

  • 如果是IE7版本以上可以按F12調(diào)出開發(fā)者工具進(jìn)行調(diào)試。
  • 如果是IE6可以使用邊框直接進(jìn)行調(diào)試。
  • 使用軟件IEterser來進(jìn)行不同的IE版本調(diào)試,然而這個軟件不方便而且收費。
  • 安裝多個虛擬機(jī)分別運行IE不同的版本進(jìn)行調(diào)試,推薦使用這個方便,穩(wěn)定,免費。
2.什么是CSS hack?在 CSS 和 HTML里如何寫 hack?在 CSS 中 ie6、ie7的 hack 方式?

答:

CSS hack由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7,對CSS的解析認(rèn)識不完全一樣,因此會導(dǎo)致生成的頁面效果不一樣,得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說,CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然,我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。

  • CSS hack一般有3種表現(xiàn)形式CSS內(nèi)部hack、選擇器hack、及HTML頭部引用(if IE)hack。
  • CSS內(nèi)部hack:主要針對內(nèi)部hack;比如IE6能識別下劃線“”和“”,IE7能識別“”但不能識別下劃線,而Firefox兩個都不認(rèn)識。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
  • 選擇器hack:比如IE6能識別HTML.class{},IE7能識別+HTML.class{}或者
    *.first-child+html.class{}。等等
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
  • HTML頭部引用:針對所有IE:<![endif]-->這類hack不僅僅對CSS有效還對判斷句里的所有代碼都生效。
3.列舉幾種 瀏覽器兼容問題

答:

  • <display:inline-block>不兼容IE67所以需要在下添加*display:inline; *zoom:1;來使IE67兼容。
  • <min-height>在IE7以下不兼容,需要給其固定寬度。
  • Box-sizing在IE67不支持。
    【CSS】最全的CSS瀏覽器兼容問題
4.針對兼容、多瀏覽器覆蓋有什么看法?漸進(jìn)增強(qiáng)優(yōu)雅降級是什么意思?

答:在考慮兼容的時候首先考慮面向的用戶是什么,如果是政府銀行的項目那就得好好考慮兼容IE67的事情,因為你做出來的東西主要是他們看。如果面對的大部分是年輕用戶那甚至可以不考慮兼容IE67,當(dāng)然還是要聽從領(lǐng)導(dǎo)的建議,但也可以對領(lǐng)導(dǎo)不合理的要求可以提出自己的見解。
在寫代碼的時候也已查一下這個瀏覽器使用的人數(shù),如果超過了5%那就有必要做下兼容,兼容并不是一定要分毫不差的在每個瀏覽器都很好的實現(xiàn),對于一些老舊的瀏覽器,只要兼容到不是那么難看的程度就可以了,一些特效比如圓角都可以去掉,為了極少數(shù)的用戶去花費極大的精力去兼容是不可取的。
漸進(jìn)增強(qiáng):是指先針對能在低版本瀏覽器上進(jìn)行編寫保證最基本的顯示,然后再針對高版本的瀏覽器進(jìn)行優(yōu)化美化。
優(yōu)雅降級:是指現(xiàn)針對高版本的瀏覽器進(jìn)行編寫,然后再對低版本的瀏覽器進(jìn)行優(yōu)化兼容處理。

5.reset.css和normalize.css分別是做什么的?為什么推薦使用 nomalize.css?

答:

  1. Normalize.css 保護(hù)了有價值的默認(rèn)值
    Reset通過為幾乎所有的元素施加默認(rèn)樣式,強(qiáng)行使得元素有相同的視覺效果。相比之下,Normalize.css保持了許多默認(rèn)的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個元素在不同的瀏覽器中有不同的默認(rèn)值時,Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合。
  1. Normalize.css 修復(fù)了瀏覽器的bug
    它修復(fù)了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關(guān)于這一點,Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。
    3.Normalize.css 不會讓你的調(diào)試工具變的雜亂使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈,如下圖所示。在Normalize.css中就不會有這樣的問題,因為在我們的準(zhǔn)則中對多選擇器的使用時非常謹(jǐn)慎的,我們僅會有目的地對目標(biāo)元素設(shè)置樣式。
    4.Normalize.css 是模塊化的這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分,這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會用到部分(比如表單的一般化)。
    5.Normalize.css 擁有詳細(xì)的文檔Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異,并且你可以更容易地進(jìn)行自己的測試。
    這個項目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的,同時也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。
  • reset.css是通過重新定義標(biāo)簽樣式,把瀏覽器的默認(rèn)樣式覆蓋掉,以便保持個瀏覽器渲染的一致性,相對暴力。
  • normalize.css是reset.css的替代方案,保留有用的瀏覽器默認(rèn)樣式,重置掉該重置的樣式,同時進(jìn)行一些bug的修復(fù),相對平和。
    有些時候重新定義一些標(biāo)簽樣式是沒必要需要的時候還得大費周折的給他加回去,所以推薦使用normalize.css。
6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用?

答:IE盒模型的寬度是:
寬度(width)=邊框(border)+內(nèi)邊距(padding)+內(nèi)容寬度(content)
標(biāo)準(zhǔn)盒模型的寬度是:實際內(nèi)容的寬度。
IE678下使用標(biāo)準(zhǔn)盒模型在文檔聲明里寫上<doctype>即可。
這是一個CSS3屬性<box-sizing:border-box>的作用是固定盒模型的寬度,使得padding無法將盒模型撐開,也是就使用IE盒模型。

操作:安裝XP虛擬機(jī)。
QQ圖片20160806201738.png

裝了3個虛擬機(jī)分別安裝IE678三個瀏覽器
測試代碼

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>任務(wù)13</title>
  <style>
    .box {
      border: 20px solid #000;
      padding: 20px;
      margin: 20px;
      width: 200px;
      height: 200px;
      background: red;
    }
   .box2{
    display: inline-block;
    }
     p{
     max-width:300px;
    }
  </style>
</head>
<body>
<div class="box"></div>
<div class="box2">hollo</div>
<div class="box2">world</div>
<p>這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本。
這是一些文本。這是一些文本。這是一些文本</p>
</body>
</html>

ie6結(jié)果如下

QQ圖片20160807002734.png

可以看出IE6部分支持Inline-block不支持max-width 但是可以使用標(biāo)準(zhǔn)模式進(jìn)行渲染。
IE7結(jié)果如下

QQ圖片20160807003322.png

可以看出IE7支持max-width但部分支持inline-block,也支持標(biāo)準(zhǔn)模式渲染,但是通過查資料發(fā)現(xiàn)inline-block在IE67支持行內(nèi)元素
IE8結(jié)果如下
QQ圖片20160807003816.png

可以看出IE8全部都支持
本教程版權(quán)歸本人和饑人谷所有

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺,可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 482評論 0 1
  • 一、問答部分: 1. 如何調(diào)試 IE 瀏覽器? 如果是IE7版本以上可以使用自帶的開發(fā)者工具,按F12,即可打開:...
    小木子2016閱讀 551評論 0 0
  • 1.如何調(diào)試 IE 瀏覽器 IE8以上有開發(fā)者工具(高版本的IE開發(fā)者工具兼容模式可以往下選擇兼容不同版本),F(xiàn)1...
    饑人谷_kule閱讀 426評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,792評論 1 92
  • 1.如何調(diào)試IE瀏覽器? 對于高版本的IE瀏覽器(IE7以上)可以使用IE自帶的開發(fā)者工具,如下圖: 使用一些集成...
    饑人谷_任磊閱讀 388評論 0 1