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?
答:
- 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)相符合。
- 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ī)。
裝了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é)果如下
可以看出IE6部分支持
Inline-block
不支持max-width
但是可以使用標(biāo)準(zhǔn)模式進(jìn)行渲染。IE7結(jié)果如下
可以看出IE7支持
max-width
但部分支持inline-block
,也支持標(biāo)準(zhǔn)模式渲染,但是通過查資料發(fā)現(xiàn)inline-block
在IE67支持行內(nèi)元素IE8結(jié)果如下
可以看出IE8全部都支持
本教程版權(quán)歸本人和饑人谷所有