Web制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

Twitter Bootstrapを無理矢理IE6で使う

未だに、IE6が現役なのはどうしようも無く、嘆いても仕方がありません。
Twitter BootstrapはIE6に対応していません。これを無理矢理対応させます。なんだか後ろ向きな開発ですが、仕方ありません。角を丸くするとか、グラデーションとかCSS3で実装されている部分は諦めます。あと、アイコンは透過pngが使えないので(一応使えるようにはできるのですが面倒)これも諦めます。
IE6でまともに動作しない主な原因はCSSです。CSS3に対応していない云々ではなく、セレクタの問題が大きいです。なので、方法としてはbootstrap.cssのセレクタをIE6でも動くように書き換えればいいのですが、そうすると、問題無く動いていた他のブラウザでもテストが必要ですし、色々現実的ではありません。
なので、bootstrap.cssをコピーしてIE6用を作ります。 そして、以下のようにhtmlを書いてIE6だけ別のcssを読み込ませます。

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css">
<![endif]-->
<!--[if gt IE 6]><!-->
<link rel="stylesheet" href="css/bootstrap.css">
<!--<![endif]-->

問題のセレクタは input[type="button"] の様な属性値を指定する物や > や [class^="icon-"]などです。そこで、これらのセレクタに連番をつけてしまいます。例えば、css上で input[type="button"] となっている物は.ie6-1にセレクタを変更します。

input[type="button"] {
width: auto;
height: auto;
}
↓
.ie6-1 {
width: auto;
height: auto;
}

その後、> を削除します。全置換で消してしまって大丈夫です。 これだけで、ある程度は使えるCSSになったので、jQueryのセレクタを使って適用していきます。Twitter Bootstrap2.0で置換したセレクタは以下の通りです。

(function ($) {
    $(document).ready(function () {
        $('input[type="button"]').addClass('ie6-1');
        $('input[type="reset"]').addClass('ie6-1');
        $('input[type="submit"]').addClass('ie6-1');
        $('input[type="search"]').addClass('ie6-2');
        $('[class*="span"]').addClass('ie6-3');
        $('[class*="span"]:first').addClass('ie6-32');
        $('.row-fluid [class*="span"]').addClass('ie6-4');
        $('.row-fluid [class*="span"]::first-child').addClass('ie6-5');
        $('input[type="image"]').addClass('ie6-6').addClass('ie6-11');
        $('input[type="checkbox"]').addClass('ie6-6');
        $('input[type="radio"]').addClass('ie6-6');
        $('input[type="file"]').addClass('ie6-7').addClass('ie6-9');
        $('input[type="button"]').addClass('ie6-8');
        $('input[type="reset"]').addClass('ie6-8');
        $('input[type="submit"]').addClass('ie6-8');
        $('select[multiple]').addClass('ie6-10');
        $('select[size]').addClass('ie6-10');
        $('input[type="hidden"]').addClass('ie6-12');
        $('.radio input[type="radio"]').addClass('ie6-13');
        $('.checkbox input[type="checkbox"]').addClass('ie6-13');
        $('input[class*="span"]').addClass('ie6-14');
        $('select[class*="span"]').addClass('ie6-14');
        $('textarea[class*="span"]').addClass('ie6-14');
        $('input[disabled]').addClass('ie6-15');
        $('select[disabled]').addClass('ie6-15');
        $('textarea[disabled]').addClass('ie6-15');
        $('input[readonly]').addClass('ie6-15');
        $('select[readonly]').addClass('ie6-15');
        $('textarea[readonly]').addClass('ie6-15');
        $('[class^="icon-"]').addClass('ie6-16');
        $('[class^="icon-"]:last-child').addClass('ie6-17');
        $('.btn[disabled]').addClass('ie6-18');
        $('.btn-primary[disabled]').addClass('ie6-19');
        $('.btn-warning[disabled]').addClass('ie6-20');
        $('.btn-danger[disabled]').addClass('ie6-21');
        $('.btn-success[disabled]').addClass('ie6-22');
        $('.btn-info[disabled]').addClass('ie6-23');
        $('.btn-inverse[disabled]').addClass('ie6-101');
        $('input[type="submit"].btn').addClass('ie6-24');
        $('input[type="submit"].btn.large').addClass('ie6-25');
        $('input[type="submit"].btn.small').addClass('ie6-26');
        $('.nav-list [class^="icon-"]').addClass('ie6-27');
        $('.btn-navbar[disabled]').addClass('ie6-28');
        $('.navbar-form input[type="image"]').addClass('ie6-29');
        $('.navbar-form input[type="checkbox"]').addClass('ie6-29');
        $('.navbar-form input[type="radio"]').addClass('ie6-29');
        $('.pagination li:first-child a').addClass('ie6-30');
        $('.pagination li:last-child a').addClass('ie6-31');
        $('.caret').text('▼');
    });
})(jQuery);

これで、結構動くはずです。あとは、細かい修正を行ってください。CSSもある程度変更が必要ですし、modalウィンドウは微妙だったりしますが、javascriptを使って動くように変更可能です。変更後のcssは下記リンクを参照ください。
ie6.css