draco1023
2/22/2012 - 12:52 PM

IE6 patch for the Twitter Bootstrap grid system

IE6 patch for the Twitter Bootstrap grid system

;(function() {
	if ($.browser.msie === true && $.browser.version === '6.0') {  // anti pattern
		// fix spans
		$('.row div[class^="span"]:first-child').not('[class*="offset"]').addClass('first-child');

		// fix offsets
		$('.row div[class*="offset"]:first-child').each(function () {
			var margin_left = parseInt($(this).css('margin-left'), 10) - 20;
			$(this).css('margin-left', margin_left);
		});
	}
})();
.row { margin:0; }

.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 { float:left ; margin-left:20px; display:inline; }

.span1.first-child,
.span2.first-child,
.span3.first-child,
.span4.first-child,
.span5.first-child,
.span6.first-child,
.span7.first-child,
.span8.first-child,
.span9.first-child,
.span10.first-child,
.span11.first-child,
.span12.first-child { margin-left:0; }

.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
.span4 { width: 300px; }
.span5 { width: 380px; }
.span6 { width: 460px; }
.span7 { width: 540px; }
.span8 { width: 620px; }
.span9 { width: 700px; }
.span10 { width: 780px; }
.span11 { width: 860px; }
.span12, .container { width: 940px; }

.offset1 { margin-left: 100px; }
.offset2 { margin-left: 180px; }
.offset3 { margin-left: 260px; }
.offset4 { margin-left: 340px; }
.offset5 { margin-left: 420px; }
.offset6 { margin-left: 500px; }
.offset7 { margin-left: 580px; }
.offset8 { margin-left: 660px; }
.offset9 { margin-left: 740px; }
.offset10 { margin-left: 820px; }
.offset11 { margin-left: 900px; }

These patches provide basic support for the Bootstrap grid system in Internet Explorer 6. The JavaScript code requires jQuery.

Feel free to fork & improve.