I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

After a bit of trial and error it turned out that if an image has a max-width specified through CSS, a width attribute in the HTML, and is the child of a floated element that has no explicit width set, IE8 makes its width zero. I’m not sure if this behaviour is correct, but it sure doesn’t seem intuitive. If this happened with images that did not have a width attribute it would be slightly more logical to me. And it seems to happen only in IE8 (and only in standards mode).

In a perfect world, cross-browser testing would be straightforward. We would download a legacy version of a browser, run it, and be able to instantly test our pages and scripts without a single care in the world. The reality of cross-browser testing, though, is very different. Issues such as runtime conflicts when running multiple versions of the same browser and inaccurate third-party testing tools mean we can spend hours just evaluating whether a testing set-up is anywhere near reliable.

I’m a user-interface developer at AOL (yes, we’re not dead yet!), and in this multi-part post I’ll take you through the exact set-up we use to accurately test content that will be potentially viewed by up to millions of users with a very diverse set of browsers. This set-up is similar to the one used by some of my colleagues at Opera, Mozilla and Google, so, fingers crossed, we’re doing this optimally.

A quick note before we begin. Setting up accurate testing for Internet Explorer as outlined in this post requires a bit of effort. So, please check your website analytics first to ensure that a sufficient number of IE users visit your website in the first place to warrant this effort.

When you try to download .docx (Word 2007) files from the Internet, does Internet Explorer want to rename them to .zip files? If you’re looking for an easy fix, stop banging your head against the wall, it’s not you. It’s the server. You should contact the webmaster and ask him or her to add the Office 2007 mime types to the server’s configuration. With Apache running on linux, this is typically in the file /etc/mime.types. Ask them to add

application/vnd.openxmlformats docx pptx xlsx
to that file, and then restart Apache. If you’re testing it out on one of your own servers, you’ll probably need to close and restart your browser, too.

Mobile-first Responsive Web Design may just be the most practical and forward-looking way to address the multitudes of devices and browsers that reach your site. But lack of native CSS3 Media Query support in Internet Explorer 8 and under (among others) presents a serious challenge to the technique.
Filament Group's own Scott Jehl has released a script to address the problem, and also achieves mobile-optimized filesize (3kb / 1kb gzipped) and near-native performance. You can learn more at the project site on Github: Respond.js Project (documentation here).

6% of visitors used some version of Internet Explorer. That is not a typo. The site works fine in Internet Explorer — the site practices what it preaches, and the live examples use a variety of fallbacks for legacy browsers — so this is entirely due to the subject matter. Microsoft has completely lost the web development community.

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css

.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }

Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc)

Adobes lösning för att hantera problemen med uppdateringen som gjorde att man måste klicka på allt inbäddad innehåll av aktiv karaktär

Diverse tricks och hack för att kringgå buggar i IE.

Den skumma float-bugg i IE som jag råkade ut för med travnet.se, här som demo hos positioniseverything.

I februari 2006 gjorde en säkerhetsuppdatering till Windows att allt inbäddat innehåll som filmer, flash, activeX osv krävde ett aktiveringsklick. Detta är Apple sätt att komma runt det för Quicktime.

Mejllistepostning om float-buggen i IE som gäckat mig.

Hur att fixa max-width i Internet Explorer som inte stödjer det i CSS2.

En artikel som förklarar "The Box Model Problem".

En djuplodande titt på Firefox och varför den webbläsaren är så bra, ur ett Windows/IE-perspektiv.