Lately, I wrote more about CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them.
You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3 addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs.
Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old browsers like Internet Explorer 6/7? As they are not maintained anymore, their rendering bugs became sort of “de facto”.
Internet Explorer 6 conditional comment
Internet Explorer 7 conditional comment
There are also more options here, but I think the above one are to most used.
Specifically target elements
If you are not a big fan of conditional comments, then you may try this solution.
Just in case, I added the line who can help you target the IE8 browser. But, sincerely, if you will need to target Internet Explorer 8, then you have bigger problems. I mean, you should start reviewing your CSS code!
This is perhaps the most encountered bug when using floated blocks. For the above example, IE6 will double the right margin. To fix this, add
display: inline to the floated element using one of the above methods (conditional comment or specifically targeting).
Button’s padding is ignored
Try to add padding to an button, you’ll see how the padding’s values are ignore on IE6 and IE7. To fix that, add
overflow: visible to that button and the problem will be solved. Read more about this here.
IE6 and negative margins weren’t never called friends. When you use a negative margin for an element, to avoid layout problems, you should add
position:relative to it.
To find out more about these common problems check this amazing resource about these bugs.
What are the most annoying bugs you encounter in your daily developing? Share them with us by adding a comment.
In the end
Its name was Internet Explorer 6. Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.
…and I’m not the one who’s saying that. :)
Put me in, coach!