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)
***
****本文版權歸饑人谷_鬼腳七和饑人谷所有豪墅,轉載請注明來源泉手。****