Cross-Browser Compatibility Issues

You should know that your web page may render and look fine in one browser but may look different (or even broken) in another browser. These problems if they occurs are called “cross-browser compatibility” issues. This is because different browser are written by different developers and there are differences in which they interpret your HTML code. In addition, there are browser bugs where the browser does not interpret the HTML as specified in the W3C specs.

Browser Bugs

In the past, Internet Explorer have been notoriously known for their browser bugs. For example, Internet Explorer 6.0 has the three pixel jog bug, the peekaboo bug, Guillotine bug, and a few more. Internet Explorer 5.5 has an mis-interpretation of the Box Model. There are workaround for these bugs, which you can find more information on in the provided links. Many of the IE issues revolves around the IE concept of “hasLayout” and many IE bugs can be resolved by cleverly making HTML elements “have layout” or using the Holly Hack.

Cross-Browser Workarounds and Hacks

Another way to fix cross-browser issue to is apply code that targets only a specific browser and not affect the other browsers. These are known as CSS Filters.

The star-html hack used to be a well-known hack to feed CSS rules only to IE 6 browsers and below and not affect other browser. But this hack does not work on IE7 or above (reference). Although you can use conditional comments to simulate it.

Because there are drawbacks with the use of these hacks, the recommended approach to applying code that you want to target only the Internet Explorer browsers and not affect any other browser is to use IE conditional comments.

How to Check Different Browser

We recommend that you have the latest copy of Firefox and Internet Explorer on your development machine so that you can test your pages in both browsers as you develop your pages. As of this writing, these are the two most popular browser.

Test often. Code a little bit of HTML and then test in both browsers. Code some more HTML and test. And so on. That way, at the point when you get two different renderings from the Firefox and IE, you will know which piece of code was the cause.

In addition to Firefox and Internet Explorer, you should also test to see how your pages render in Opera and Safari, for Windows and for Macs, as well as different versions of Internet Explorer.

Running Different Versions of Browsers on Same Machine

Unfortunately, Windows does not let you install two different version of Internet Explorer on the same machine. Although you might want to try some hacked stand alone IE versions that will make that happen (more details here), we find that it is no substitute for the real browser. The hacked versions may not handle IE conditional comments, PNG transparency, and other complex workarounds as accurately in the native version.

Using Firefox profiles, you can run different versions of Firefox with different installed plugins. You can even run Firefox 2 and Firefox 3 side-by-side on the same machine as described in Cozi Tech Blog.

Browser Screen Captures

Fortunately, there are “browser screen capture” services that will take your URL of your page and will run it through various real browsers (not simulations) and will show you a screen capture of what you page looks like in those browsers. The most well known is BrowserCam.com. But there are also others listed here (some of which are free).

Which Browser to Use First

When differences in rendering occurs in different browsers, you would start the fix by working with the most compliant browser first. Most compliant means the one that most closely follows the W3C HTML spec. At the time of this writing, it would be Firefox. And then apply the necessary workaround or hacks to make the other browser look the same. This method is also advocated by Douglas Bowman in his talk about tableless design.

Leave a Reply