-
如何調(diào)試 IE 瀏覽器
F12調(diào)出開發(fā)者工具進行調(diào)試：
高版本瀏覽器可以模擬低版本瀏覽器：
但是對于更低版本的IE6和IE7因為不存在開發(fā)者工具，建議通過搭建虛擬器進行調(diào)試：
-
什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？
由于不同廠商的瀏覽器，比如IE，Safari，Chrome等，或是同一瀏覽器的不同版本，對CSS的解析不同，因此會導致生成的頁面效果不同，得不到想要的頁面效果，這個時候就要針對不同的瀏覽器去寫不同的CSS，讓它同時兼容不同瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單說CSS hack目的就是使CSS代碼兼容不同的瀏覽器。
CSS和HTML中寫hack：
CSS hack大致有三種變現(xiàn)形式：CSS屬性前綴法，選擇器前綴法，以及IE條件注釋法。
- 屬性前綴法
如，針對IE6的前綴hack：
.main {
_color: black;
-color: black;
}
針對IE7及以下的前綴hack：
.main {
!color: black;
$color: black;
&color: black;
*color: black;
)color: black;
=color: black;
%color: black;
+color: black;
@color: black;
,color: black;
.color: black;
/color: black;
`color: black;
]color: black;
#color: black;
~color: black;
?color: black;
:color: black;
|color: black;
}
針對IE6~8的前綴hack：
.main{
color: black\9;
color/*\**/: black\9;
}
- 選擇器前綴法：
* html .selector {}/*針對IE6*/
*+html .selector {}/*針對IE7*/
3.IE條件注釋法：
利用低版本IE無法識別注釋的特性進行hack：
<!--[if IE 6]>
this is IE 6
<![end if]-->
<!--[if IE 7]>
this is IE 7
<![end if]-->
<!--[if IE 8]>
this is IE 8<br/>
<![end if]-->
<!--[if IE 9]>
this is IE 9<br/>
<![end if]-->
<!--[if !IE]-->
this is a good browser;
<!--<![end if]-->
-
列舉幾種 瀏覽器兼容問題
-
display:inline-block的兼容問題
.selector{
display:inline-block;
*display:inline;
*zoom:1;
}
-
min-height兼容問題：
.selector{
min-height:100px;
height:auto !important;
height:100px;
}
- 透明度兼容問題：
.selector{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
-
針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優(yōu)雅降級是什么意思？
要對使用人群進行調(diào)研，如果一個瀏覽器的使用人群低于5%則可以忽略該瀏覽器，因為要在所有瀏覽器實現(xiàn)同一效果是不現(xiàn)實的，并且針對一些低版本瀏覽器本身也存在一些無法解決的兼容bug，對于需要過多投入而無法得到相應回報的事情應該放棄。
逐漸增強：對低版本瀏覽器進行設計，保證功能，然后在針對高瀏覽器進行效果等改進。
優(yōu)雅降級：直接對高版本瀏覽器進行完整功能設計，然后再進行低版本兼容。
-
reset.css和normalize.css分別是做什么的？為什么推薦使用normalize.css?
reset.css是樣式重置，以暴力方式覆蓋掉瀏覽器的所有默認樣式，以保持瀏覽器渲染的一致性。
normalize.css則是一沖reset.css的代替方案，注重榮泳方案，重置掉該重置的樣式，保留有用的user agent樣式，同時進行一些bug修復。
normalize.css的優(yōu)點：
- 保護有用的瀏覽器默認樣式，而不是完全去掉他們；
- 一般化的樣式：為大部分HTML元素提供；
- 修復瀏覽器自身的bug，并保證個瀏覽器的一致性；
- 優(yōu)化CSS可用性；
- 解釋代碼：用注釋和詳細的文檔。
-
IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用
IE盒模型：寬度=邊框+padding+內(nèi)容寬度：
標準盒模型：寬度= 內(nèi)容寬度：
添加
<!DOCTYPE html>可以讓IE678使用標準盒模型。box-sizing:border-box是CSS3新增屬性，設置之后相當于以IE6模式解析盒模型
IE6,7,8下的盒模型，display:inline-block,max-width
- 盒模型：
IE678盒模型
改變padding和border之后的盒模型：
IE678盒模型 -
display:inline-block:
在IE8中，支持display:inline-block
IE8
在不添加<!DOCTYPE html>聲明時，則不支持display:inline-block:
ie8怪異模式
在IE7中，塊級元素不支持display:inline-block,行內(nèi)元素支持：
ie7
IE6和IE7相同：
IE6 -
max-width：
IE8支持max-width屬性：
IE8
IE8在怪異模式下不支持：
IE8怪異模式
IE7支持max-width屬性：
IE7
在怪異模式下，IE7同樣不支持該屬性：
IE7怪異模式
IE6完全不支持該屬性：
IE6
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源。
