Browser Bugs

Webkit

There are times when Webkit browsers won’t paint the screen correctly (you will probably find elements located in the wrong position; this has happened to me before when using FooterStick.) There are a few hacks to force the browser to repaint/reflow the page. The hack that ended up working for me was to:

  1. Wait a little bit
  2. Set opacity to 99%
  3. Wait a little bit and put it back to 100%.
function redrawElement(elem) {
	//This can be used to force the browser to repaint the screen. Webkit tends to need this the most.
	//The tricky bit might be finding the right element to apply this hack to. For footerStick I needed
	//to apply this to the wrapping element.
	var repaintStyle = 'opacity';
	switch (repaintStyle) {
		case 'opacity':
			$(elem).css("opacity", .99);
			setTimeout(function(){
			   $(elem).css("opacity", 1);
			},90);    
			break;
		case 'newElement':
			var n = document.createTextNode(' ');
			$(elem).append(n);
			setTimeout(function(){n.parentNode.removeChild(n)}, 90);
			break;
	}
}

Firefox

Responsive Images

Side note:
I’m not exactly sure if this would be considered a bug or not. It kinda seems like Firefox’s layout engine is behaving correctly, and Webkit is a bit loosey goosey. Whatever, you still need to make it work on all browsers...

I like to use the CSS property max-width: 100% on images to make them fit their container. There are times, however when it doesn’t work in Firefox. The key is to make sure the immediate parent element has a defined size. So, if the parent is a block or inline-block, then set a width. If the parent is a table cell, then you may to change the layout rule with:

table {
	table-layout: fixed;
}

Internet Explorer

Telling to Be Modern

IE users can have the compatibility mode checked which may display your modern site to display poorly. Tell IE to use compliant behavior with the head tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

This should be placed as high as possible in the page; along with other meta tags is fine. IE=edge means to use the latest (Trident) rendering engine. chrome=1 means to use Google Chrome Frame if it is installed.

Box Model Hack

The easiest way to avoid box sizing problems is to use CSS property box-sizing: border-box; as show here.

/* apply a natural box layout model to all elements */
* {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

If you must (or want to) use the default box-sizing value, then my prefered method for making box sizes consistent across browsers is to put put a <div> in a <div>. The outer div should have no margins or padding, and it will specify the width. Apply the margins/padding to the inner div.

Media Queries

IE8 and earlier do not understand CSS media queries. More information is on the Media Query page.

Rounded Corners

IE9 and up supports the CSS border-radius property. You may need to include this to get it to work:

<meta http-equiv="X-UA-Compatible" content="IE=9">

has-layout

Applying zoom: 1; to every element is a way to force elements to gain the proprietary hasLayout property in IE browsers. This can fix a number of (truly) weird bugs in IE.
Read more about it here.

min-height Property

If IE is not obeying the min- or max-height properties, then you will have to use the height property instead. This may have to be done with conditional comments such as:

<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->

<p>Wrap the whole body with conditional comments so you can target 
   IE specific items in your CSS with:
#IEroot .thing {
	height:500px;
}
</p>

<!--[if IE]>
</div>
<![endif]-->
</body>

Conditional Comments

Internet Explorer has a proprietary way of reading comments. You can target certain sections of HTML to not be a comment by using the special syntax shown above.

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

Iterating Over an Array

IE8 and lower doesn’t pay attention to the enumerable property for arrays, so when looping through all the elements there is a right way and wrong way to do it.

Right Way

for (var i=0;i<myArray.length;i++) {
  alert(myArray[i]);
}

Frankly, when iterating over an Array (vs. object) this is the better approach regardless of the browser or version because you can be guaranteed of the index position this way.

Wrong Way (Although this works fine in real browsers)

for (var i in myArray) {
  alert(myArray[i]);
}