之前由於看好很容易上手的bootstrap,然后用這個框架寫了個網站,對於不會美工和細致設計的攻城師來說,bootstrap是個界面設計的瑞士軍刀,三下五除二就能搞定個不算太丑的頁面。
吭哧吭哧工作了一陣,網站功能基本完工,最后要發布時發現要有點麻煩,畢竟當前還是有很大一部分用戶生活在IE6\7\8的世界中,真心希望他們能過上好日子。
攻城師就是解決問題的,因此為了能夠使古老的IE能夠穿上華麗的服裝,就只好着手改造一下,修補一下當前的頁面,使其不至於慘不忍睹。網上已經有關於讓bootstrap適應ie6的解決方案,叫做鄙視IE(bsie),Bootstrap IE6 兼容庫,奈何目前我的網站是用bootstrap3編寫的,那個鄙視IE是針對bootstrap2.x編寫的,但萬變不離其宗,就參考鄙視IE的寫法,再結合自己的項目做些修改。
工作還在進行中,但思路確定之后只是時間的問題,不至於一開始看到四分五裂的頁面時的恐懼與擔憂。
其實bootstrap3對於ie8的支持還可以,只要加入類似如下的JS,在ie8中大致能看,需要修改的也只是很少的局部。
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
大致用到的對於IE的css hack方式為:
.brand{
*border-width: 0;
}
div.col-sm-offset-2{
_margin-left: 8.8%;
}
.nav li {
float: left;
}
也就是“_”:只有IE6才認識,“*”:IE6和IE7都認識,其它的就以if lt IE 8之類的語句來包含針對特定IE瀏覽器版本的css或js。
另外別忘記定義html的doctype,沒有這個標記,版面布局會處於一個很莫名其妙的狀態中,調試了老半天大概都不知道是什么情況:<!DOCTYPE html>