I always find some "ill" when tackling the subject "compatibility between browsers." Also, and I have yet to understand the real reason, of all the browsers I know the most "annoying" him remains: Microsoft Internet Explorer 6! Unfortunately, the release of IE 6 is still in circulation and there are frequent reports of problems when viewing pages.
A web developer must organize themselves in order to have all the tools to control and check his (sweaty) work on all possible browsers (and platforms) available. Microsoft Internet Explorer, more than others, makes this task more difficult because - now - you should check their web pages with both the latest version 8 (still in beta) and with previous versions, such as 6 or 5.5 . There are various ways to live with different versions of Internet Explorer (see Use Microsoft Internet Explorer 6 and 7 simultaneously ) as an alternative and there are also excellent (although a bit 'slow) online services .
Another good option, which works well on Windows Vista, is represented by IETester , a free application and built by the developers of DebugBar and Companion.JS . IETester , although it is still in beta and some crashes lurking, allows quickly check if our pages - simultaneously - both on IE5.5, IE6, IE7 and IE8 beta.
CSS Patch
If by IETester we can find a flaw in the styles, that is interpreted differently between IE6 and IE7, or IE6 and Firefox, for example, the solution must be found so that only IE6 uses the new definition. I, for example, happened with a margin! I had a class that sets the right margin to 28px, and on all browsers, the result was identical, except with IE6! On the latter, to make the same layout, I had to use a value of 8px.
A very simple way, very easy to remember and to solve the immediate problem, is to "override" our way by loading a different ad hoc file only if the browser is - feared - IE6:
1 2 3 4 | / ** File ie_override.css ___ * Use this file to override a style * / margin-left : 8px } div. mystyle {margin-left: 8px} |
1 2 3 4 | <! - Styles for all browsers -> "stylesheet" href = "css/style.css" type = "text/css" > < link rel = "stylesheet" href = "css / style.css" type = "text / css"> <! - Styles only for IE6 -> <!--[ If lt IE 7]> <link rel="stylesheet" type="text/css" href="css/ie_override.css" /> <! [Endif] -> |
Finally, a very simple workaround ..
Congratulations to the many technical articles very interesting, keep it up!
I hate IE 6 to 5 not to mention me in good stead this tool
[...] As IE6 endure and live happy [...]
To avoid the bug of doubling margin in IE6, not just add
display:inline?@ Simo:
Yes, in fact, see Internet Explorer 6: eliminate the double margin bug . In this post, however, I was a different kind of example, and for more general situations where, unfortunately, not enough to add a
display:inline.Definitely the worst browser around, this little trick I use it often and I have solved a lot of trouble, in my site but I refused to use it and put a link to download IE 7, it is time for people to realize that This browser is eradicated.
Ennio @: I agree ...