I was working on a project that required cross-browser compatibility, this generally means at least FireFox and IE. The reason is due to the fact that IE is still the most commonly used browser (IE7, IE6, etc.), FireFox coming in second, and then the other browsers split up the rest.
I was trying to code the following structure:
<div>
<div/><div/>
</div>
<div>
<div/><div/>
</div>
Except the two inner most divs were floated left, followed by a break which cleared the float. The code rendered perfect in FireFox and IE7, but it didn’t render correctly in IE 6. So I wracked my head on it for a bit, looked up various reasons on why IE 6 might render the code differently, and eventually found a solution. The solution is to make the div’s position relative. This solution is completely counter-intuitive, and frankly, doesn’t make much sense. So the moral of the story is, sometimes the solution for things can be very dumb, but regardless, it’s the solution.