如何調(diào)試 IE 瀏覽器
-
IE7以上自帶調(diào)試工具
- IE6以下使用
border: 1px solid red;通過border便捷查看 -
IEtester
- 安裝虛擬機，安裝不同版本IE進(jìn)行調(diào)試
- netrenderer也可以在線模擬IE瀏覽器系列來打開網(wǎng)頁凑耻，不過經(jīng)過測試，它其實也只是返回檢測網(wǎng)頁的第一屏截圖而已，肯定比不上IETester直觀和實用吼句。http://netrenderer.com
-
http://browsershots.org
這個工具非常強悍，它能夠模擬100多款不同的瀏覽器訪問網(wǎng)頁，然后返回網(wǎng)頁的截圖介粘。我們可以從返回的網(wǎng)頁截圖看網(wǎng)頁的顯示是否達(dá)到預(yù)期，從而進(jìn)行修改調(diào)試晚树。
什么是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屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack录煤，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的鳄厌。
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線""和星號" "，IE7能識別星號" "妈踊，但不能識別下劃線""了嚎，IE6~IE10都認(rèn)識"\9"，但firefox前述三個都不能認(rèn)識
.container{
_color: red;/IE6識別/
color: red;/IE6,IE7識別/
color: red\9;/IE6-IE10識別/
color: red\0;/IE8-IE10識別/
color: red\9\0;/IE9,IE10識別*/
}選擇器前綴法(即選擇器Hack)：例如 IE6能識別
html .class{}廊营，IE7能識別+html .class{}或者*:first-child+html .class{}IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 歪泳，針對IE6及以下版本： 。這類Hack不僅對CSS生效露筒，對寫在判斷語句里面的所有代碼都會生效
<script>alert(1);</script>
列舉幾種 瀏覽器兼容問題
- IE6呐伞、IE7不識別inline-block但行內(nèi)可以觸發(fā)塊元素。其它主流瀏覽器均支持inline-block慎式。
- 方法1：inline-block觸發(fā)塊元素伶氢，具有了layout的特性，然后設(shè)置display:inline使塊元素呈現(xiàn)內(nèi)聯(lián)元素瘪吏，此時layout的特性不會消失鞍历。
- 方法2：直接設(shè)置display:inline，使用zoom:1觸發(fā)layout肪虎。
兼容所有瀏覽器的方法是：
.layout { display:inline-block;
*display:inline;
*zoom:1;
}
標(biāo)簽設(shè)置min-height不兼容
解決辦法：如果我們要設(shè)置一個標(biāo)簽的最小高度200px劣砍，需要進(jìn)行的設(shè)置為：
{
min-height:200px;
height:auto!important;
height:200px;
overflow:visible;
}
備注：在B/S系統(tǒng)前端開發(fā)時，有很多情況下我們有這種需求扇救。當(dāng)內(nèi)容小于一個值（如300px）時刑枝，容器的高度為300px；當(dāng)內(nèi)容高度大于這個值時迅腔，容器高度被撐高装畅，而不是出現(xiàn)滾動條。這時我們就會面臨這個兼容性問題沧烈。-
opacity是用來設(shè)定元素透明度的掠兄， 是CSS 3里的一個屬性，IE8以下不支持锌雀，包括一些老版本的瀏覽器也不支持蚂夕。
.opacity{ filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; /* 老版Safari */ opacity: 0.5; /* 支持opacity的瀏覽器*/ }
- 各瀏覽器默認(rèn)margin與padding不同
*{
margin:0;
padding:0;
}
針對兼容、多瀏覽器覆蓋有什么看法腋逆？漸進(jìn)增強和優(yōu)雅降級是什么意思婿牍？
需要針對自身的項目進(jìn)行調(diào)研，若某瀏覽器所占比例大于一定百分比（如5%）才會考慮該瀏覽的兼容惩歉。
漸進(jìn)增強 progressive enhancement：針對低版本瀏覽器進(jìn)行構(gòu)建頁面等脂，保證最基本的功能俏蛮，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗上遥。
優(yōu)雅降級 graceful degradation：一開始就構(gòu)建完整的功能搏屑，然后再針對低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始粉楚，并試圖減少用戶體驗的供給睬棚，而漸進(jìn)增強則是從一個非常基礎(chǔ)的解幼，能夠起作用的版本開始抑党，并不斷擴充，以適應(yīng)未來環(huán)境的需要撵摆。降級（功能衰減）意味著往回看底靠；而漸進(jìn)增強則意味著朝前看，同時保證其根基處于安全地帶特铝。
reset.css和normalize.css分別是做什么的暑中？為什么推薦使用 nomalize.css?
- Normalize 相對「平和」，注重通用的方案鲫剿，重置掉該重置的樣式鳄逾，保留有用的 user agent 樣式，同時進(jìn)行一些 bug 的修復(fù)灵莲，這點是 reset 所缺乏的雕凹。
- Reset 相對「暴力」，不管你有沒有用政冻，統(tǒng)統(tǒng)重置成一樣的效果枚抵，且影響的范圍很大，講求跨瀏覽器的一致性明场。
- normalize.css優(yōu)點
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來
IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用
- W3C標(biāo)準(zhǔn)中padding汽摹、border所占的空間不在width、height范圍內(nèi)苦锨，
- 俗稱的IE的盒模型width包括content尺寸＋padding＋border
- 早期IE6逼泣、IE7使用“IE盒模型”，后來更新了一次舟舒，更新后的IE6拉庶、IE7使用 標(biāo)準(zhǔn)盒模型IE8及以上版本使用標(biāo)準(zhǔn)盒模型
-
沒有DOCTYPE的情況下使用怪異模式，IE也使用“IE盒模型”
-
box-sizing:border-box使得所有盒模型均按照IE盒子模型處理魏蔗。即為元素設(shè)定的寬度和高度決定了元素的邊框盒砍的。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制莺治。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度廓鞠。(為CSS3屬性，IE8以上才支持谣旁，包括IE8)
virtualbox 安裝 xp 虛擬機
在 ie 6, 7, 8中展示 盒模型床佳、inline-block、max-width的區(qū)別
- 盒模型（IE678均一樣）(設(shè)置
font-size:0或line-height:0均可解決此BUG)
IE678均一樣 -
inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.inline-block{
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 10px solid #ccc;
background: green;
}
</style>
</head>
<body>
<div class="inline-block"></div>
<div class="inline-block"></div>
<a class="inline-block" href=""></a>
<a class="inline-block" href=""></a>
</body>
<html>
IE8完全支持inline-block
IE8
IE6榄审、7塊級元素不支持inline-block,行內(nèi)元素支持
-
max-width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task13</title>
<style>
.box1 {
max-width: 100px;
height: 100px;
border: 5px solid;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">這是一段測試砌们。這是一段測試。這是一段測試搁进。這是一段測試浪感。這是一段測試。這是一段測試饼问。這是一段測試影兽。這是一段測試。這是一段測試莱革。這是一段測試峻堰。這是一段測試。這是一段測試盅视。</div></body> </html>
IE8支持
IE7支持
IE6不支持
