HTML5學習第2篇——hack 技術
阿新 • • 發佈：2018-11-30
hack技術
主要解決的問題
hack技術主要解決瀏覽器顯示相容性問題。因為不同瀏覽器或相同瀏覽器的不同版本對CSS 解析機制不同，導致頁面的顯示效果不相同。為了更好的使用者體驗需要網頁能夠在不同的瀏覽器上正常顯示。
應用場景
1. HTML5和CSS3的支援
案例：IE 條件註釋
對 IE 的版本和非 IE 有優秀的區分能力，是 Web 開發中常用的hack方法，能對 IE 系列產品進行單獨的 HTML 程式碼處理，下面是cdn地址寫法示例：
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]--> 由於目前IE6/IE7/IE8還有很大一部分使用者，為了讓網站瀏覽者都能正常的訪問HTML5網站，有在HTML程式碼中新增條件註釋的必要。
- html5shiv：解決ie9以下瀏覽器對HTML5提出的新的元素不識別，這些新元素不能作為父節點包裹子元素，並且不能應用CSS樣式。
- respond.min:讓不支援css3 Media Query的瀏覽器支援響應式佈局。
完整HTML5程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title html5shiv.js 引用程式碼必須放在 <head>元素中，因為 IE 瀏覽器在解析 HTML5 新元素時需要先載入該檔案。
2.css hack
- 屬性字首法
- 適用範圍：IE:6.0,IE7.0,IE8.0之間的相容
- 例項說明：
此例中我們使用了漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，此時，我們的IE8已經獨立識別。 - 例項程式碼：
.bb{
height:32px;
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
/*一個用於展示的class為bb的div標籤*/
< div class ="bb"></ div >
- 選擇器字首法(即選擇器Hack)
*html *字首只對IE6生效
*+html *+字首只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
- 不同瀏覽器相容的程式碼:
/*firefox瀏覽器：firefox3.5+ -moz*/
-moz-transform: rotate | scale | skew | translate ;
/*Safari and Chrome瀏覽器： -webkit*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera -o*/
-o-transform: rotate | scale | skew | translate ;
/*IE9 -ms*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C標準*/
transform: rotate | scale | skew | translate ;
| 主流瀏覽器 | 核心 | 引數 |
|---|---|---|
| firefox | Gecko | -moz |
| Safari | Webkit | -webkit |
| Chrome | Webkit/Blink（Chrome核心） | -webkit |
| Opera | Presto/Webkit/Blink | -o |
| IE9 | Trident（IE核心） | -ms |
| 國內瀏覽器 | 核心 | 引數 |
|---|---|---|
| 360瀏覽器、獵豹 | IE+Chrome雙核心 | -ms -webkit |
| 搜狗、遨遊、QQ | Trident（相容模式）+Webkit（高速模式） | -ms -webkit |
| 百度瀏覽器、世界之窗 | IE核心 | -ms |
| 2345 | IE+Chrome雙核心 | -ms -webkit |
參考文章 五大主流瀏覽器及四大核心
參考文章 hack技術
參考網站地址 https://www.duitang.com/static/csshack.html