華麗的bootstrap3碰到土鱉IE6


      之前由於看好很容易上手的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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM