Flood

Universal Solution for Internet Explorer (IE5+) Issues

16 December, 2010

Anyone who has ever done web development knows the challenges of dealing with Internet Explorer. This browser causes numerous problems, especially for those who want to implement modern features like rounded corners.

Internet Explorer, the honorary pensioner, does not recognize anything modern. That’s why almost all web developers dislike it.

Let’s not delve into whether this is the fault of IE’s developers or other browsers imposing their standards. Instead, let’s focus on a universal solution for Internet Explorer, starting from version 5. This solution is a JavaScript script developed by Dean Edwards that fixes a multitude of issues and makes IE work correctly with all modern functions. By inserting a single line in your head section:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
<![endif]-->

You get a lot of fixes. You will have PNG transparency, the ability to set minimum/maximum width/height, general opacity without filters, and much more. In short, Internet Explorer will start understanding all the standard CSS parameters that other browsers have been handling for a long time.

All the current capabilities can be found here, and the home page of the script is here. I understand the development of the script is still ongoing, and this is not the final version. Perhaps, sooner or later, there will be a script that solves 100% of cross-browser issues, but for now, we can be happy with what we have.

What Does IE9.js Do?

IE9.js is a JavaScript library that fixes numerous IE issues, including:

  • Support for PNG image transparency.
  • Minimum and maximum width and height of elements.
  • Support for modern CSS properties like border-radius, box-shadow, and others.
  • General opacity without using filters.

Adding IE9.js

To use IE9.js on your site, add it to the <head> section of your HTML document using a conditional comment to load the script only for IE versions below 9:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
    <![endif]-->
</head>
<body>
    <div id="block">Rounded corners and other styles</div>
</body>
</html>

Advantages of Using IE9.js

  1. Simplified Development: With this script, you can forget about specific hacks and workarounds for IE. Develop your site using modern standards.
  2. Versatility: The script covers many versions of IE (starting from version 5), solving most compatibility issues.
  3. Support for Modern Features: IE9.js adds support for modern CSS properties, making development less painful.

How IE9.js Works

The script dynamically fixes the browser’s shortcomings. It adds support for modern CSS properties and corrects rendering bugs present in older versions of IE. This is done using JavaScript polymorphism and other modern programming techniques.

Additional Resources

For full information on capabilities and additional configuration options, visit the project’s homepage.

Conclusion

Although older versions of Internet Explorer are gradually falling out of use, web developers may still need to support these browsers for certain projects. IE9.js offers a universal and easy-to-use solution for many compatibility issues, allowing you to focus on modern web development standards without the need to resort to outdated techniques and hacks.