未だに、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